Chart.js点之间的差距

cedebl8k  于 2023-05-17  发布在  Chart.js
关注(0)|答案(3)|浏览(170)

我不知道如何(或者是否可能)在chart.js的折线图中创建一个间隙。
示例:
我有一些每年的数据:

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

-1表示没有数据的年份。在这种情况下,应该只有一条线连接2012和2013。
这是怎么做到的?我已经设法隐藏了点,但我不能隐藏连接2011年的线,而不删除连接其他点的整条线。

vyswwuz2

vyswwuz21#

现在可以通过在数据集数组中将spanGaps属性设置为true来实现。
http://www.chartjs.org/docs/latest/charts/line.html

bis0qfac

bis0qfac2#

编辑:这里是一个版本的填充工作http://jsfiddle.net/leighking2/sLgefm04/6/
所以一种方法是扩展线图。唯一的问题是你必须覆盖整个initialise方法,以便正确存储所有的点。下面是一个显示自定义折线图的小工具,它可以执行您所描述的http://jsfiddle.net/leighking2/sLgefm04/操作
已经从原始线图i改变的重要位已经放置了大的注解块,所以这里是高亮,在示例中使用了null来表示间隙,但是这可以仅仅交换为-1
在initialize方法中,处理数据并将其转换为点,这是需要进行更改的地方,以便仍然包含丢失的数据

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方法中,每当我们在一个我们想要忽略的数据点或刚刚经过一个数据点时,我们移动笔而不是绘制

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

唯一的问题是这个填充看起来很时髦,所以我把它注解掉了,现在它只是一个线图。

ljsrvy3e

ljsrvy3e3#

当此数据集的spanGaps为false时,将在y == null的点周围的2个点之间创建间隙。

相关问题