时间戳

首页 > 解决方案 > chart.js：连接两个折线图的问题

javascript - chart.js：连接两个折线图的问题

问题描述

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

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

标签： javascriptchart.js

解决方案

为了让第二行从第一行的末尾开始，它的数据数组需要跳过这些值。您可以做的是用与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第二个数据集的属性。

推荐阅读