123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- (function(Chart) {
- var helpers = Chart.helpers;
- var plugins = Chart.plugins;
- Chart.defaults.global.animation.duration = 1000;
- Chart.defaults._set('linearGauge', {
- scale: {
- type: 'linearGauge',
- horizontal: false,
- range: {
- startValue: -100,
- endValue: 500
- },
- responsive: true,
- font: {
- fontName: 'Arial',
- fontSize: 12
- },
- axisWidth: 6,
- ticks: {
- majorTicks: {
- interval: 100,
- height: 1,
- }
- },
- scaleLabel: {
- display: true,
- interval: 100,
- units: '',
- customValues: [],
- offset: -10,
- color: '#777b80'
- }
- },
- padding: {
- top: 0,
- bottom: 0,
- left: 0,
- right: 0
- },
- tooltips: {
- callbacks: {
- label: function(tooltipItem, data) {
- var label = data.datasets[tooltipItem.datasetIndex].label || '';
- if (label) {
- label += ': ';
- }
- label += Math.round(data.datasets[tooltipItem.datasetIndex].data[0] * 100) / 100;
- return label;
- }
- }
- },
- legend: {
- display: true,
- labels: {
- fontColor: 'rgb(0, 0, 0)'
- },
- position: 'bottom'
- }
- });
- Chart.controllers.linearGauge = Chart.DatasetController.extend({
- dataElementType: Chart.elements.Gaugerect,
- initialize: function() {
- var me = this;
- var meta;
- Chart.DatasetController.prototype.initialize.apply(me, arguments);
- meta = me.getMeta();
- },
- linkScales: helpers.noop,
- update: function(reset) {
- var me = this;
- var rects = me.getMeta().data;
- var i, ilen;
- me.datashifts = 0;
- for (i = 0, ilen = rects.length; i < ilen; ++i) {
- me.updateElement(rects[i], i, me.datashifts);
- me.datashifts += 10;
- }
- },
- updateElement: function(rectangle, index, reset) {
- var me = this;
- var chart = me.chart;
- var meta = me.getMeta();
- var dataset = me.getDataset();
- var custom = rectangle.custom || {};
- var rectangleOptions = chart.options.elements.rectangle;
- var gaugeOptions = chart.options.elements.gaugerect;
- rectangle._Scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
- rectangle._datasetIndex = me.index;
- rectangle._index = index;
- rectangle.rangeColorImage = null;
- // Init element model
- rectangle._model = {
- datasetLabel: dataset.label,
- label: chart.data.labels[index],
- borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
- backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, gaugeOptions.backgroundColor),
- borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
- borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
- };
- // Set empty view as start point for animation
- if(typeof rectangle._view === 'undefined') rectangle._view = {};
- me.updateElementGeometry(rectangle, index, reset);
- },
- updateElementGeometry: function(rectangle, index, reset) {
- var me = this;
- var model = rectangle._model;
- var start = rectangle._view;
- var dataset = me.getDataset().data;
- var dopt = me.getDataset();
- var chart = me.chart;
- var datasets = chart.data.datasets;
- var gaugeOptions = chart.options.elements.gaugerect;
- var vscale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
- //var base = vscale.getBasePixel();
- var base = vscale.getBase();
- var horizontal = rectangle._Scale.isHorizontal();
- //var ruler = me._ruler || me.getRuler();
- var vpixels = me.calculateBarValuePixels(me.index, index, horizontal);
- model.horizontal = horizontal;
- model.base = base;
- model.head = vpixels.head;
- model.x = horizontal ? vpixels.base : vpixels.offset;
- model.y = horizontal ? (vpixels.offset - (dopt.width || gaugeOptions.width)) : vpixels.head;
- model.height = horizontal ? (dopt.width || gaugeOptions.width) : (vpixels.base - vpixels.head);
- model.width = horizontal ? (vpixels.head - vpixels.base) : (dopt.width || gaugeOptions.width);
- model.value = vscale.getRightValue(datasets[me.index].data[index]);
- model.scaleValue = 0;
- if (horizontal) {
- model.scaleValue = vscale.width / (vscale.options.range.endValue - vscale.options.range.startValue);
- } else {
- model.scaleValue = vscale.height / (vscale.options.range.endValue - vscale.options.range.startValue);
- }
- if(typeof start.x === 'undefined' && typeof start.y === 'undefined'){
- if(horizontal){
- start.x = vpixels.base;
- start.width = 0;
- } else {
- start.y = vpixels.base;
- start.height = 0;
- }
- }
- },
- calculateBarValuePixels: function(datasetIndex, index, horizontal) {
- var me = this;
- var chart = me.chart;
- var scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
- var datasets = chart.data.datasets;
- var dopt = datasets[datasetIndex];
- var value = scale.getRightValue(datasets[datasetIndex].data[index]);
- var stacked = scale.options.stacked;
- var start = 0;
- var i, imeta, ivalue, base, head, size, offset;
- base = scale.scalePoint(start);
- head = scale.scalePoint(start + value);
- size = (head - base) / 2;
- offset = horizontal ? scale.yCenter - dopt.offset : scale.xCenter + dopt.offset;
- return {
- size: size,
- base: base,
- head: head,
- center: head + size / 2,
- offset: offset
- };
- },
- draw: function() {
- var me = this;
- var chart = me.chart;
- var rects = me.getMeta().data;
- var dataset = me.getDataset();
- var ilen = rects.length;
- var i = 0;
- helpers.canvas.clipArea(chart.ctx, chart.chartArea);
- for (; i < ilen; ++i) {
- if (!isNaN(dataset.data[i])) {
- rects[i].draw();
- }
- }
- helpers.canvas.unclipArea(chart.ctx);
- },
- setHoverStyle: function(rectangle) {
- var dataset = this.chart.data.datasets[rectangle._datasetIndex];
- var index = rectangle._index;
- var custom = rectangle.custom || {};
- var model = rectangle._model;
- model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
- model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.valueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
- model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.valueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
- },
- removeHoverStyle: function(rectangle) {
- var dataset = this.chart.data.datasets[rectangle._datasetIndex];
- var index = rectangle._index;
- var custom = rectangle.custom || {};
- var model = rectangle._model;
- var rectangleElementOptions = this.chart.options.elements.gaugerect;
- model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
- model.borderColor = custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
- model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
- }
- });
- }).call(this, Chart);
|