Javascript Line ChartJS空/空值不';不要越界
当值为null或空时,我想打断图表的线条,但我不能。也许我错过了什么Javascript Line ChartJS空/空值不';不要越界,javascript,null,chart.js,break,Javascript,Null,Chart.js,Break,当值为null或空时,我想打断图表的线条,但我不能。也许我错过了什么 var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ {
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, null, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, null, 19, null, 27, 90]
} ]
};
代码如下:Chart.js不直接支持此功能
var myLineChart = new Chart(ctx).LineAlt(data, {
datasetStrokeWidth: 0.01,
datasetFill: false,
pointDotRadius : 2,
pointDotStrokeWidth: 3
});
请注意,类型是LineAlt-这是处理2的方式。-通过扩展折线图类型
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;
})
})
}
});
Fiddle-也许这在2015年不可用,但现在直线图有一个样式选项
spanGaps
,如果为真,将在没有或空数据的点之间绘制直线。如果为false,则带有NaN数据的点将在线中创建一个中断。谢谢@PotatoPeeringSunCaptedTypeError:无法读取的属性“extend”undefined@hemanjosko-如果您正在寻求有关错误的帮助,您可能需要添加一个小标题或发布一个问题。干杯@potatopeelings他只是在使用图表v2,它没有相同的模型,也就是说,你的答案不再有效:(