我试图在整个使用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
}
]
};
问题是,线型图只能识别两个率先“空”为空数据点和不显示它们。 不过,对于到来后的零点,线路(连接上一个和下一个有效数据点)所示,这使得它看起来好像真的存在“空” -datapoints。 有没有办法在linecharts不显示空值? (类似于Canvas.js提供: http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/ )
我通过chart.js之文档阅读和StackOverflow上也没有找到答案。 谁能帮我?
在发布答案的总结线ChartJS空/空值不破线 WITH(轻微)修正了上面的问题
延长线图表
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;
})
})
}
});
你必须这样调用LineAlt
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
其他的变化对您的问题做出 - 数据应该是一个数组,而不是一个逗号分隔值设定值
小提琴- http://jsfiddle.net/zu3p2nky/
编辑2016年8月
这现在工作在箱子外面,而不需要延期,只是使用的null
作为一个数据点。
我读了在线文档 ,发现它被称为布尔选项spanGaps
这里的一个代码段,这是我用于显示这样的:
{
'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
}
}
图表与spanGaps = false
:
图表与spanGaps = true