我有一个时间表图表类型。我想根据数据集对象的值在两个点之间的每个步骤上定义颜色。
在我的数据集数据数组中,我添加了第三项来定义颜色(如果<30 ==>绿色/> 30 ==>红色)
实际上我只是尝试使用红色。
我发现a working example,该怎么做。但它基于非时间图表类型。
我尝试将其调整为适合我的示例,但在上一步中出现错误
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",
这是复制品
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>
答案 0 :(得分:0)
another question上已经有一个答案,它引用了一个GitHub post,其中提到了用Chart.js 2.7.1编写的JSFiddle,可以毫无问题地更新到最新的2.9.3版本。
EgorOvechkin的信用额
代码:
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: {}
});