Home > Article > Web Front-end > Dashboard plug-in based on HTML5 canvas
Brief Tutorial
canvas-gauges is a dashboard plug-in based on HTML5 Canvas. This dashboard plug-in uses pure js to drive animation and can create circular and linear dashboard components.
Installation
You can install the dashboard plug-in through npm
$ npm install canvas-gauges
Usage method
Introduce it into the page gauge.min.js file.
<script type="text/javascript" src="js/gauge.min.js"></script>
HTML structure
Use a
<canvas id="demo"></canvas>
Initialization plug-in
You can initialize the dashboard plug-in through js. For example:
var gauge = new LinearGauge({ renderTo: 'gauge-id', colorNumbers: 'red', width: 100, height: 300 })
You can also use the data-* attributes directly in the HTML code to configure the dashboard. The above js code is equivalent to:
<canvas data-type="linear-gauge" data-color-numbers="red" data-width="100" data-height="300" ></canvas>
For detailed parameter introduction and API of the canvas dashboard, please refer to https://canvas-gauges.com/documentation/api/
canvas The github address of the -gauges dashboard plug-in is: https://github.com/Mikhus/canvas-gauges
The above is the content of the dashboard plug-in based on HTML5 canvas. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!