Biblioteca de medidores HTML5 basada en canvas-Gauge. js

Vista prévia

Descripción

Gauge. js es una librería JavaScript pura que se usa para generar medidores lineales/radiales animados, dinámicos y altamente configurables usando el elemento canvas de HTML5.

Instalación

# NPM
$ npm install canvas-gauges --save

¿Cómo funciona?

Cargue la versión minimizada de la biblioteca Gauge. js en la Página Web.

<script src="gauge.min.js"></script>

Cree un elemento canvas de HTML5 en el que desee dibujar los medidores.

<canvas id="demo"></canvas>

Modelizar un medidor lineal básico en el elemento canvas.

var gauge = new LinearGauge({


renderTo: '#demo',


// more settings here
})

Represente un medidor radial básico en el elemento canvas.

var gauge = new LinearGauge({


renderTo: '#demo',


// more settings here
})

Todos los ajustes predeterminados. Tenga en cuenta que la configuración como se muestra a continuación se puede pasar a través de atributos Data-OPTION en el elemento canvas.

// basic options
renderTo: null,
width: 0,
height: 0,
minValue: 0,
maxValue: 100,
value: 0,
units: false,
majorTicks: [0, 20, 40, 60, 80, 100],
minorTicks: 10,
strokeTicks: true,
animatedValue: false,
animateOnInit: false,
title: false,
borders: true,

// number formats
valueInt: 3,
valueDec: 2,
majorTicksInt: 1,
majorTicksDec: 0,

// animations
animation: true,
animationDuration: 500,
animationRule: 'cycle',

// colors
colorPlate: '#fff',
colorPlateEnd: '',
colorMajorTicks: '#444',
colorMinorTicks: '#666',
colorTitle: '#888',
colorUnits: '#888',
colorNumbers: '#444',
colorNeedle: 'rgba(240,128,128,1)',
colorNeedleEnd: 'rgba(255,160,122,.9)',
colorValueText: '#444',
colorValueTextShadow: 'rgba(0,0,0,0.3)',
colorBorderShadow: 'rgba(0,0,0,0.5)',
colorBorderOuter: '#ddd',
colorBorderOuterEnd: '#aaa',
colorBorderMiddle: '#eee',
colorBorderMiddleEnd: '#f0f0f0',
colorBorderInner: '#fafafa',
colorBorderInnerEnd: '#ccc',
colorValueBoxRect: '#888',
colorValueBoxRectEnd: '#666',
colorValueBoxBackground: '#babab2',
colorValueBoxShadow: 'rgba(0,0,0,1)',
colorNeedleShadowUp: 'rgba(2,255,255,0.2)',
colorNeedleShadowDown: 'rgba(188,143,143,0.45)',

fontNumbers: 'Arial',
fontTitle: 'Arial',
fontUnits: 'Arial',
fontValue: 'Arial',

fontNumbersSize: 20,
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 40,

fontNumbersStyle: 'normal',
fontTitleStyle: 'normal',
fontUnitsStyle: 'normal',
fontValueStyle: 'normal',

fontNumbersWeight: 'normal',
fontTitleWeight: 'normal',
fontUnitsWeight: 'normal',
fontValueWeight: 'normal',

// needle
needle: true,
needleShadow: true,
needleType: 'arrow',
needleStart: 5,
needleEnd: 85,
needleWidth: 4,

// borders
borderOuterWidth: 3,
borderMiddleWidth: 3,
borderInnerWidth: 3,
borderShadowWidth: 3,

// value and highlights
valueBox: true,
valueBoxStroke: 5,
valueText: '',
valueTextShadow: true,
valueBoxBorderRadius: 2.5,
highlights: [

{ from: 20, to: 60, color: '#eee' },

{ from: 60, to: 80, color: '#ccc' },

{ from: 80, to: 100, color: '#999' }
]

<canvas
data-type="radial-gauge"




 data-min-value="0"




 data-max-value="360"




 data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"




 data-minor-ticks="22"




 data-ticks-angle="360"




 data-start-angle="180"




 data-stroke-ticks="false"




 data-highlights="false"




 data-color-plate="#222"




 data-color-major-ticks="#f5f5f5"




 data-color-minor-ticks="#ddd"




 data-color-numbers="#ccc"




 data-color-needle="rgba(240, 128, 128, 1)"




 data-color-needle-end="rgba(255, 160, 122, .9)"




 data-value-box="false"




 data-value-text-shadow="false"




 data-color-circle-inner="#fff"




 data-color-needle-circle-outer="#ccc"




 data-needle-circle-size="15"




 data-needle-circle-outer="false"




 data-needle-type="line"




 data-needle-start="75"




 data-needle-end="99"




 data-needle-width="3"




 data-borders="true"




 data-border-inner-width="0"




 data-border-middle-width="0"




 data-border-outer-width="10"




 data-color-border-outer="#ccc"




 data-color-border-outer-end="#ccc"




 data-color-needle-shadow-down="#222"




 data-animation-target="plate"




 data-animation-duration="1500"




 data-animation-rule="linear"




 data-width="500"




 data-height="500"




 data-units="ᵍ"




 data-value="0"
></canvas>

Registro de cambios

09/13/2018

• v2.1.5