Chart.js点之间的差距 [英] Chart.js gap between points

问题描述

我无法弄清楚如何（或者是否可能）在chart.js中的折线图中创建间隙。

I can't figure out how (or if it is possible) to create a gap in a line chart in chart.js.

示例：

我每年都有一些数据：

2010|20.3
2011|-1
2012|21.4
2013|26.5

-1代表没有数据的一年。在这种情况下，应该只有一条连接2012年和2013年的线。

-1 represents a year with no data. In this case there should only be a line connecting 2012 and 2013.

这是怎么做到的？我设法隐藏了点，但我无法隐藏连接2011的线而不删除连接其他点的整条线。

How is that done? I have managed to hide the dot, but I can't hide the lines connecting 2011 without removing the entire line connecting the other dots.

推荐答案

编辑：这是一个填充工作的版本 http://jsfiddle.net/leighking2/sLgefm04 / 6 /

here is a version with the fill working http://jsfiddle.net/leighking2/sLgefm04/6/

所以一种方法是扩展折线图。唯一的问题是您必须覆盖整个初始化方法，只是为了允许正确存储所有点。这是一个小提示，显示了一个自定义线图，可以执行您所描述的内容 http://jsfiddle.net/leighking2/sLgefm04/

So one way to do it would be to extend the line graph. The only prob is you have to override the entire initialise method just to allow all the points to be stored correctly. Here is a fiddle showing a custom line graph that does what you describe http://jsfiddle.net/leighking2/sLgefm04/

从原始折线图中改变的重要位我放置了大的注释块，所以这里是亮点，在示例中使用了o null表示间隙，但这可以在初始化方法中交换为-1

the important bits that have been altered from the original line graph i have placed large comment blocks over so here are the highlights, in the example o have used null to represent gaps but this could just be swapped for -1

处理数据并将其转入点，这是更改所需的位置碰巧允许丢失数据仍然包含在内

in the initialize method the data is processed and turned in to the points, this is where the change needs to happen to allow the missing data to still be included

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);

然后在draw方法中，只要我们处于数据点，我们想要忽略或只是过去一个我们移动笔而不是绘图

then in the draw method whenever we are at a data point we want to ignore or just past one we move the pen rather than drawing

    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);

唯一的问题是填充看起来很合适，所以我评论了它，它只是一个线图现在。

only issue with this was the fill looked proper funky so i commented it out and it's just a line graph now.

这篇关于Chart.js点之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！