javascript - Chart.js:连接两个折线图的问题

Question

我正在尝试更改 Chart.js 中折线图部分的颜色。我关注了这些帖子:

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

还有

Chartjs Line Color Between Two Points

我即将获得正确的结果，但是，第二行不想从第一行的末尾开始。

这是有问题的代码:

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 第二个数据集的属性。