You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
7.2 KiB
234 lines
7.2 KiB
(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);
|
|
|