helpers.each(dataset.data, function(dataPoint, index) {
/**
*
* Check for datapoints that are null
*/
if (helpers.isNumber(dataPoint) || dataPoint === null) {
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.points.push(new this.PointClass({
/**
* add ignore field so we can skip them later
*
*/
ignore: dataPoint === null,
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.pointStrokeColor,
fillColor: dataset.pointColor,
highlightFill: dataset.pointHighlightFill || dataset.pointColor,
highlightStroke: dataset.pointHighlightStroke || dataset.pointStrokeColor
}));
}
}, this);
helpers.each(dataset.points, function(point, index) {
/**
* no longer draw if the last point was ignore (as we don;t have anything to draw from)
* or if this point is ignore
* or if it's the first
*/
if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
if (this.options.bezierCurve) {
ctx.bezierCurveTo(
dataset.points[index - 1].controlPoints.outer.x,
dataset.points[index - 1].controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
} else {
ctx.lineTo(point.x, point.y);
}
} else if (index === 0 || dataset.points[index - 1].ignore) {
ctx.moveTo(point.x, point.y);
}
}, this);
3条答案
按热度按时间vyswwuz21#
现在可以通过在数据集数组中将
spanGaps
属性设置为true来实现。http://www.chartjs.org/docs/latest/charts/line.html
bis0qfac2#
编辑:这里是一个版本的填充工作http://jsfiddle.net/leighking2/sLgefm04/6/
所以一种方法是扩展线图。唯一的问题是你必须覆盖整个initialise方法,以便正确存储所有的点。下面是一个显示自定义折线图的小工具,它可以执行您所描述的http://jsfiddle.net/leighking2/sLgefm04/操作
已经从原始线图i改变的重要位已经放置了大的注解块,所以这里是高亮,在示例中使用了null来表示间隙,但是这可以仅仅交换为-1
在initialize方法中,处理数据并将其转换为点,这是需要进行更改的地方,以便仍然包含丢失的数据
然后在draw方法中,每当我们在一个我们想要忽略的数据点或刚刚经过一个数据点时,我们移动笔而不是绘制
唯一的问题是这个填充看起来很时髦,所以我把它注解掉了,现在它只是一个线图。
ljsrvy3e3#
当此数据集的spanGaps为false时,将在y == null的点周围的2个点之间创建间隙。