chart.js：连接两个折线图的问题答案

【问题标题】：chart.js: issue with concatening two line chartschart.js：连接两个折线图的问题
【发布时间】：2020-06-15 09:44:25
【问题描述】：

我正在尝试更改 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”值以推动它前进，但它不会成功。有人会知道如何解决这个问题吗？

【问题讨论】：

您似乎有两个数据集，这意味着图表中有两条线，这是您的意图吗？还是您的意思是扩展现有数据集以获取更多数据。如果不是，那么也许你应该用null 填充第二个数据集，这样它就从另一个数据集的结束处开始。
换句话说，您可以尝试类似：data.default8.forEach(() => { data.default18.unshift(null); });
没错，我想让第二个从第一个开始的地方开始，我尝试填充这样的```数据：[NaN，NaN，defaultData8]，但它不起作用。在调用之前我无法真正修改数据集。
我试试看，这行代码应该放在哪里？
在您收到数据之后并将其提供给图表数据集之前。

标签： javascript chart.js

【解决方案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 属性。

【讨论】：

这是接近工作！唯一的问题是它把第二个数据集推得太远了。它从“向前 30 天”开始，而不是之前的那一点。我对 javascript 很陌生，所以我不知道如何修复它，但它的进展
如果您希望它从前一个数据集的末尾开始，您可以将slice() 更改为slice(1)。这行得通吗？
行得通，谢谢！你教给我的有用技巧再次感谢