[英]Chart.js line chart with area range
我想在Chart.js折線圖中添加另一個尺寸,類似於下圖,或者這個Highcharts示例 。 鑒於Chart.js的無數擴展選項,我很難理解我能夠實現這樣一個功能的地方。
理想情況下,我能夠提供一個數據集,其字段類似於指定某一點的線寬的data
。
您可以從折線圖類型創建新的圖表類型來執行此操作
預習
腳本
Chart.defaults.stripe = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.stripe = Chart.controllers.line.extend({
draw: function(ease) {
var result = Chart.controllers.line.prototype.draw.apply(this, arguments);
// don't render the stripes till we've finished animating
if (!this.rendered && ease !== 1)
return;
this.rendered = true;
var helpers = Chart.helpers;
var meta = this.getMeta();
var yScale = this.getScaleForId(meta.yAxisID);
var yScaleZeroPixel = yScale.getPixelForValue(0);
var widths = this.getDataset().width;
var ctx = this.chart.chart.ctx;
ctx.save();
ctx.fillStyle = this.getDataset().backgroundColor;
ctx.lineWidth = 1;
ctx.beginPath();
// initialize the data and bezier control points for the top of the stripe
helpers.each(meta.data, function(point, index) {
point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
});
Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);
// draw the top of the stripe
helpers.each(meta.data, function(point, index) {
if (index === 0)
ctx.moveTo(point._view.x, point._view.y);
else {
var previous = helpers.previousItem(meta.data, index);
var next = helpers.nextItem(meta.data, index);
Chart.elements.Line.prototype.lineToNextPoint.apply({
_chart: {
ctx: ctx
}
}, [previous, point, next, null, null])
}
});
// revert the data for the top of the stripe
// initialize the data and bezier control points for the bottom of the stripe
helpers.each(meta.data, function(point, index) {
point._view.y -= 2 * (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
});
// we are drawing the points in the reverse direction
meta.data.reverse();
Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);
// draw the bottom of the stripe
helpers.each(meta.data, function(point, index) {
if (index === 0)
ctx.lineTo(point._view.x, point._view.y);
else {
var previous = helpers.previousItem(meta.data, index);
var next = helpers.nextItem(meta.data, index);
Chart.elements.Line.prototype.lineToNextPoint.apply({
_chart: {
ctx: ctx
}
}, [previous, point, next, null, null])
}
});
// revert the data for the bottom of the stripe
meta.data.reverse();
helpers.each(meta.data, function(point, index) {
point._view.y += (yScale.getPixelForValue(widths[index]) - yScaleZeroPixel);
});
Chart.controllers.line.prototype.updateBezierControlPoints.apply(this);
ctx.stroke();
ctx.closePath();
ctx.fill();
ctx.restore();
return result;
}
});
接着
...
data: ...,
width: [12, 4, 5, 13, 12, 2, 19],
...
小提琴 - http://jsfiddle.net/u20cfpcd/
注意:樂隊似乎沒有出現間歇性問題。 if (!this.rendered && ease !== 1) return
似乎可以解決這個問題。 感謝@ClaudeBrisson確定問題和解決方案!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.