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 as the container of the dashboard.

<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 (m.sbmmt.com)!