[英]Different color for line segments in ChartJS
I have a time line chart type.我有一个时间线图类型。 I would like to define color on every step between two dots depending on dataset object values.
我想根据数据集对象值在两个点之间的每一步上定义颜色。
In my dataset data array I have added a third item which will define the color ( if < 30 ==> green / >30 ==> red )在我的数据集数据数组中,我添加了第三个项目来定义颜色( if < 30 ==> green / >30 ==> red )
Actually I'm trying to only use red color.其实我想只使用红色。
I have found a working example ,on how do do that.我找到了一个工作示例,关于如何做到这一点。 but it's based on non-time chart type.
但它基于非时间图表类型。
I have tried to adapt it to my example but I get error in last step我已尝试将其调整到我的示例中,但在最后一步出现错误
ctx.bezierCurveTo(
previous.controlPoints.outer.x,
previous.controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
"Uncaught TypeError: Cannot read property 'outer' of undefined",
Here a reproduction这里再现
var canvas = document.getElementById('myChart'); let customLine = Chart.controllers.line.extend({ name: 'line', draw: function() { Chart.controllers.line.prototype.draw.apply(this, arguments); let datasetLength = this.chart.config.data.datasets.length; for (let i = 0; i < datasetLength; i++) { for (let j = 0; j < this.chart.config.data.datasets[i].data.length; j++) { var index = j; var datasetIndex = i; var hasValue = function(item) { return item.y !== null; }, previousPoint = function(point, collection, index) { return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point; }; var ctx = this.chart.ctx; var dataset = this.chart.config.data.datasets[datasetIndex]; var pointsWithValues = Chart.helpers.where(dataset.data, hasValue); ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.beginPath(); var point = dataset.data[index]; ctx.moveTo(point.x, point.y); point = dataset.data[index + 1]; console.log(point) var previous = previousPoint(point, pointsWithValues, index + 1); ctx.bezierCurveTo( previous.controlPoints.outer.x, previous.controlPoints.outer.y, point.controlPoints.inner.x, point.controlPoints.inner.y, point.x, point.y ); ctx.stroke(); } } } }); Chart.controllers.customLine = customLine; var config = { "options": { "scales": { "xAxes": [ { "type": 'time', "time": { "unit": 'minute', "unitStepSize": 60, }, "distribution": 'linear', "bounds": 'ticks', "ticks": { "source": 'auto', "autoSkip": true, "stepSize": 10 } } ], }, }, "data": { "labels": ['2016-04-18T00:00:00Z', '2016-04-18T23:59:00Z'], "datasets": [ { "label": "line", "type": "customLine", "backgroundColor": "#00b", "borderColor": "#00b", //"yAxisID": "axis4", "borderWidth": 1, "fill": false, "data": [ {x:"2016-04-18T01:00:00Z", y:1,z:10}, {x:"2016-04-18T04:00:00Z", y:2,z:20}, {x:"2016-04-18T06:00:00Z", y:3,z:60}, {x:"2016-04-18T08:00:00Z", y:7,z:70}, {x:"2016-04-18T10:00:00Z", y:1,z:30}, {x:"2016-04-18T14:00:00Z", y:3,z:100} ] }, ] }, }; var myBarChart = Chart.Line(canvas, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script> <canvas id="myChart" width="400" height="200"></canvas>
There's already an answer at another question which references a GitHub post which mentions a JSFiddle written in Chart.js 2.7.1 which can be updated to the latest 2.9.3 version without problems.还有已经在回答另一个问题,它引用了一个GitHub的职位,其中提到一个的jsfiddle写在chart.js之2.7.1可以更新到最新的2.9.3版本,没有问题。
Credit to EgorOvechkin归功于 EgorOvechkin
Code:代码:
var ctx = document.getElementById('myChart').getContext('2d');
//adding custom chart type
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
draw: function(ease) {
var
startIndex = 0,
meta = this.getMeta(),
points = meta.data || [],
colors = this.getDataset().colors,
area = this.chart.chartArea,
originalDatasets = meta.dataset._children
.filter(function(data) {
return !isNaN(data._view.y);
});
function _setColor(newColor, meta) {
meta.dataset._view.borderColor = newColor;
}
if (!colors) {
Chart.controllers.line.prototype.draw.call(this, ease);
return;
}
for (var i = 2; i <= colors.length; i++) {
if (colors[i-1] !== colors[i]) {
_setColor(colors[i-1], meta);
meta.dataset._children = originalDatasets.slice(startIndex, i);
meta.dataset.draw();
startIndex = i - 1;
}
}
meta.dataset._children = originalDatasets.slice(startIndex);
meta.dataset.draw();
meta.dataset._children = originalDatasets;
points.forEach(function(point) {
point.draw(area);
});
}
});
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'multicolorLine',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
//first color is not important
colors: ['', 'red', 'green', 'blue']
}]
},
// Configuration options go here
options: {}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.