Home  >  Article  >  Web Front-end  >  Dashboard plug-in based on HTML5 canvas

Dashboard plug-in based on HTML5 canvas

黄舟
黄舟Original
2017-01-18 14:39:262742browse

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.

Dashboard plug-in based on HTML5 canvas

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: &#39;gauge-id&#39;,
  colorNumbers: &#39;red&#39;,
  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)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn