chart.js：连接两行图表的问题

Question

我想在chart.js中改变一个线图的一部分的颜色。我遵循了这些帖子。

How to change line segment color of a line graph in Chart.js?

还有

Chartjs两点之间的线条颜色

我已经接近达到正确的结果，但是，第二行不想从第一行的结尾开始。

下面是有问题的代码。

var myChart5 = new Chart(ctx5, {
    type: 'line',
    data: {
        labels: document.getElementById('tag4').textContent == 'ITEMS IN DIFFICULTY' ?
            ['90 days backward','60 days backward','30 days backward','30 days forward'] :
            ['90 days backward','60 days backward','30 days backward','30 days forward'],
        datasets: [{
            labels: labels8,
            data: defaultData8,
            fill: true,
            backgroundColor: ['rgba(54, 162, 235, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)'],
            borderWidth: 1                            
        }, {
            label: labels18,
            data: defaultData18,
            fill: true,
            backgroundColor: ['rgba(255, 99, 132, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)'],
            borderWidth: 1
        }],
        options: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Quantity Sold'
                    },
                    ticks: {
                        min: 0
                    }
                }]           
            }
        }
    }
});

这里是数据的样子

"labels8": [
    "90_days_backward",
    "60_days_backward",
    "30_days_backward"
],
"default8": [
    129259.0,
    149651.0,
    70699.0
],
"labels18": [
    "30_days_backward",
    "30_days_forward"
],
"default18": [
    70699.0,
    109145.6
]

我有点不明白该怎么做 我试过在第二个数据集中加入 "NaN "值来推动它，但是没有用。谁能告诉我如何解决这个问题？

Answer 1

为了让第二条线从第一条线的末端开始，它的数据数组需要跳过这些值。你可以做的是在第二个数组中填入 null 的次数，因为第一个数组有值。

在上面粘贴的图表配置中，在第二个数据集中，以下是你如何将 data 属性。

// to start right after the end of the previous line
data: defaultData8.slice().fill(null).concat(defaultData18)

// to start on top of the end of the previous line
data: defaultData8.slice(1).fill(null).concat(defaultData18)

这将复制第一个数据数组(保持原数据的完整性)，用它的值覆盖所有的值 null，将其与第二个类似数据连接，然后将其分配给 data 第二个数据集的属性。