javascript 如何将空数据点添加到 Chart.js 上的折线图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30570402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add an empty data point to a linechart on Chart.js?
提问by TheBigDoubleA
I'm trying to add empty data points throughout a line chart using Chart.js. I have this:
我正在尝试使用 Chart.js 在整个折线图中添加空数据点。我有这个：
var data = {
labels: [
"1","2","3","4","5","6","7","8","9","10"
],
datasets: [
{
label: "Traffic",
data: null,null,20,40,null,null,null,10,20,null
}
]
};
The problem is that the linechart only recognizes the first two "nulls" as being empty data points and doesn't display them. However, for the nulls that come after, a line (connecting the previous and next valid datapoint) is shown, which makes it seem as if the "null"-datapoints actually exist. Is there a way to NOT display null-values in linecharts? (Similar to what Canvas.js offer: http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/)
问题是折线图只将前两个“空值”识别为空数据点，而不显示它们。但是，对于后面的空值，会显示一条线（连接前一个和下一个有效数据点），这使得“空”数据点看起来好像确实存在。有没有办法不在折线图中显示空值？（类似于 Canvas.js 提供的内容：http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/ ）
I read through the Chart.js documentation and stackoverflow but could not find an answer. Can anyone help me?
我通读了 Chart.js 文档和 stackoverflow，但找不到答案。谁能帮我？
回答by NChechulin
I read line documentationand found a boolean option which is called spanGaps
我阅读了行文档并找到了一个名为的布尔选项spanGaps
Here's a piece of code, which i used to display this:
这是一段代码，我用来显示这个：
{
'type': 'line',
'data': {
'labels': [1, 2, 3, 4, 5],
'datasets': [{
'label': 'example',
'data': [4, 1, null, 3],
// These are style properties, there is no need to copy them
'borderColor': 'rgba(255,99,132,1)',
'borderWidth': 1,
'fill': false,
tension: 0.2,
}]
},
'options': {
spanGaps: true // this is the property I found
}
}
Chart with spanGaps = false:
图表spanGaps = false：
Chart with spanGaps = true
图表与 spanGaps = true
回答by potatopeelings
Posting the summary of the answer at Line ChartJS empty / null values doesn't break the lineWITH (slight) corrections for the question above
在Line ChartJS 空/空值处发布答案摘要不会打破对上述问题的（轻微）更正
Extend the line chart
扩展折线图
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// now draw the segments
var ctx = this.chart.ctx
this.datasets.forEach(function (dataset) {
ctx.strokeStyle = dataset.strokeColor
var previousPoint = {
value: null
};
dataset.points.forEach(function (point) {
if (previousPoint.value !== null && point.value !== null) {
ctx.beginPath();
ctx.moveTo(previousPoint.x, previousPoint.y);
ctx.lineTo(point.x, point.y);
ctx.stroke();
}
previousPoint = point;
})
})
}
});
You have to call the LineAlt thus
你必须这样调用 LineAlt
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
Other changes made for your question - data should be an array and not a comma separated set of values value
为您的问题所做的其他更改 - 数据应该是一个数组，而不是逗号分隔的一组值
Fiddle - http://jsfiddle.net/zu3p2nky/
小提琴 - http://jsfiddle.net/zu3p2nky/
Edit Aug 2016
2016 年 8 月编辑
This now works out of box without the need for an extension, just be using the nullas a data point.
这现在无需扩展即可开箱即用，只需将null用作数据点。
