为什么我的折线图使用多条线连接随机点？ (Chart.js)

Question

有人可以帮我理解为什么 chart.js 中的绿线数据集使用多条线连接随机点吗？我已经用下面的数据配置了这张图表一段时间了，今天才开始发生这种情况。该图表使用来自自定义 API 的数据填充。返回的数据今天已更改，但我不知道这会如何影响它。

我担心底部的绿线。它应该只是连接数据点的一条线。但是，它将随机点与多条线连接起来，而不仅仅是一条线。我有两个这样设置的图表。第二张图表的表现如何。我将在下面包含该图表的照片作为参考。

这里它单独出现在图表上并放大以便更好地查看。这让我发疯，因为我不明白为什么它突然开始这样做。任何帮助是极大的赞赏！谢谢！

 const config = {
                data: {
                    datasets: [{
                        type: "scatter",
                        label: "Meter VS. Temp",
                        data: [{
                            x: obj.model.data.average_dry_bulb_temperature[365],
                            y: obj.model.data.raw_value[365]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[366],
                            y: obj.model.data.raw_value[366]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[367],
                            y: obj.model.data.raw_value[367]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[368],
                            y: obj.model.data.raw_value[368]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[369],
                            y: obj.model.data.raw_value[369]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[370],
                            y: obj.model.data.raw_value[370]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[371],
                            y: obj.model.data.raw_value[371]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[372],
                            y: obj.model.data.raw_value[372]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[373],
                            y: obj.model.data.raw_value[373]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[374],
                            y: obj.model.data.raw_value[374]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[375],
                            y: obj.model.data.raw_value[375]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[376],
                            y: obj.model.data.raw_value[376]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[377],
                            y: obj.model.data.raw_value[377]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[378],
                            y: obj.model.data.raw_value[378]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[379],
                            y: obj.model.data.raw_value[379]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[380],
                            y: obj.model.data.raw_value[380]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[381],
                            y: obj.model.data.raw_value[381]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[382],
                            y: obj.model.data.raw_value[382]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[383],
                            y: obj.model.data.raw_value[383]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[384],
                            y: obj.model.data.raw_value[384]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[385],
                            y: obj.model.data.raw_value[385]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[386],
                            y: obj.model.data.raw_value[386]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[387],
                            y: obj.model.data.raw_value[387]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[388],
                            y: obj.model.data.raw_value[388]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[389],
                            y: obj.model.data.raw_value[389]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[390],
                            y: obj.model.data.raw_value[390]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[391],
                            y: obj.model.data.raw_value[391]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[392],
                            y: obj.model.data.raw_value[392]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[393],
                            y: obj.model.data.raw_value[393]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[394],
                            y: obj.model.data.raw_value[394]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[395],
                            y: obj.model.data.raw_value[395]
                        }
                        ],
                        backgroundColor: 'rgb(255, 0, 0)',
                        pointRadius: 5
                    }, {
                        type: 'line',
                        label: 'High Limit',
                        data: [{
                            x: obj.model.data.average_dry_bulb_temperature[365],
                            y: obj.model.data.predicted_value_upper_bound[365]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[366],
                            y: obj.model.data.predicted_value_upper_bound[366]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[367],
                            y: obj.model.data.predicted_value_upper_bound[367]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[368],
                            y: obj.model.data.predicted_value_upper_bound[368]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[369],
                            y: obj.model.data.predicted_value_upper_bound[369]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[370],
                            y: obj.model.data.predicted_value_upper_bound[370]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[371],
                            y: obj.model.data.predicted_value_upper_bound[371]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[372],
                            y: obj.model.data.predicted_value_upper_bound[372]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[373],
                            y: obj.model.data.predicted_value_upper_bound[373]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[374],
                            y: obj.model.data.predicted_value_upper_bound[374]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[375],
                            y: obj.model.data.predicted_value_upper_bound[375]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[376],
                            y: obj.model.data.predicted_value_upper_bound[376]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[377],
                            y: obj.model.data.predicted_value_upper_bound[377]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[378],
                            y: obj.model.data.predicted_value_upper_bound[378]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[379],
                            y: obj.model.data.predicted_value_upper_bound[379]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[380],
                            y: obj.model.data.predicted_value_upper_bound[380]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[381],
                            y: obj.model.data.predicted_value_upper_bound[381]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[382],
                            y: obj.model.data.predicted_value_upper_bound[382]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[383],
                            y: obj.model.data.predicted_value_upper_bound[383]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[384],
                            y: obj.model.data.predicted_value_upper_bound[384]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[385],
                            y: obj.model.data.predicted_value_upper_bound[385]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[386],
                            y: obj.model.data.predicted_value_upper_bound[386]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[387],
                            y: obj.model.data.predicted_value_upper_bound[387]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[388],
                            y: obj.model.data.predicted_value_upper_bound[388]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[389],
                            y: obj.model.data.predicted_value_upper_bound[389]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[390],
                            y: obj.model.data.predicted_value_upper_bound[390]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[391],
                            y: obj.model.data.predicted_value_upper_bound[391]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[392],
                            y: obj.model.data.predicted_value_upper_bound[392]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[393],
                            y: obj.model.data.predicted_value_upper_bound[393]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[394],
                            y: obj.model.data.predicted_value_upper_bound[394]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[395],
                            y: obj.model.data.predicted_value_upper_bound[395]
                        }
                        ],
                        fill: false,
                        pointRadius: 0,
                        borderColor: 'rgb(0, 0, 255)',

                    }, {
                        type: 'line',
                        label: 'Low Limit',
                        data: [{
                            x: obj.model.data.average_dry_bulb_temperature[365],
                            y: obj.model.data.predicted_value_lower_bound[365]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[366],
                            y: obj.model.data.predicted_value_lower_bound[366]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[367],
                            y: obj.model.data.predicted_value_lower_bound[367]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[368],
                            y: obj.model.data.predicted_value_lower_bound[368]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[369],
                            y: obj.model.data.predicted_value_lower_bound[369]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[370],
                            y: obj.model.data.predicted_value_lower_bound[370]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[371],
                            y: obj.model.data.predicted_value_lower_bound[371]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[372],
                            y: obj.model.data.predicted_value_lower_bound[372]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[373],
                            y: obj.model.data.predicted_value_lower_bound[373]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[374],
                            y: obj.model.data.predicted_value_lower_bound[374]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[375],
                            y: obj.model.data.predicted_value_lower_bound[375]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[376],
                            y: obj.model.data.predicted_value_lower_bound[376]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[377],
                            y: obj.model.data.predicted_value_lower_bound[377]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[378],
                            y: obj.model.data.predicted_value_lower_bound[378]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[379],
                            y: obj.model.data.predicted_value_lower_bound[379]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[380],
                            y: obj.model.data.predicted_value_lower_bound[380]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[381],
                            y: obj.model.data.predicted_value_lower_bound[381]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[382],
                            y: obj.model.data.predicted_value_lower_bound[382]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[383],
                            y: obj.model.data.predicted_value_lower_bound[383]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[384],
                            y: obj.model.data.predicted_value_lower_bound[384]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[385],
                            y: obj.model.data.predicted_value_lower_bound[385]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[386],
                            y: obj.model.data.predicted_value_lower_bound[386]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[387],
                            y: obj.model.data.predicted_value_lower_bound[387]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[388],
                            y: obj.model.data.predicted_value_lower_bound[388]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[389],
                            y: obj.model.data.predicted_value_lower_bound[389]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[390],
                            y: obj.model.data.predicted_value_lower_bound[390]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[391],
                            y: obj.model.data.predicted_value_lower_bound[391]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[392],
                            y: obj.model.data.predicted_value_lower_bound[392]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[393],
                            y: obj.model.data.predicted_value_lower_bound[393]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[394],
                            y: obj.model.data.predicted_value_lower_bound[394]
                        }, {
                            x: obj.model.data.average_dry_bulb_temperature[395],
                            y: obj.model.data.predicted_value_lower_bound[395]
                        }],
                        fill: false,
                        pointRadius: 0,
                        borderColor: 'rgb(0, 128, 0)',
                        tension: 0.1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            };

let ctx = document.getElementById('myChart').getContext('2d');
            let myChart = new Chart(ctx, config);

这是表现正常的图表。折线图由一条线连接，并按顺序排列。而不是像上面那样用多条线连接随机图。该图表的数据集与上面的非常相似。唯一的区别是 x 轴变量。

Answer 1

这是因为您的第一个数据集是 scatter，默认情况下散点图不会在点之间画线，因此您需要将数据集类型更改为 line 或将此线添加到散点图数据集：showLine: true

编辑：

Chart.js 按照您提供的顺序绘制它的点，奇怪的行为来自于您以随机顺序给出点的事实，因此如果您想要一条平滑的线，您需要先对数据集进行排序递增 x 值，然后将其提供给 chart.js

为什么我的折线图使用多条线连接随机点？ (Chart.js)

Why is my line chart using multiple lines to connect random points? (Chart.js)

javascript

jquery

charts

chart.js