为什么我的折线图使用多条线连接随机点？（图表.js）答案

【问题标题】：Why is my line chart using multiple lines to connect random points? (Chart.js)为什么我的折线图使用多条线连接随机点？（图表.js）
【发布时间】：2021-09-15 22:34:30
【问题描述】：

谁能帮我理解为什么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 轴变量。

【问题讨论】：

标签： javascript jquery charts chart.js

【解决方案1】：

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

编辑：

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

【讨论】：

我的原始问题措辞完全错误。那是我的错。我不希望散点图连接。我想修复以奇怪方式连接的底部绿线图。我编辑了问题以提供更好的上下文
为你更新答案@Matthew
感谢工作。想解释一下我为清关做了什么。我将 x 和 y 变量分成两个数组，然后将它们加入一个键值对对象。然后我将它放入一个新数组中，并按键值升序对其进行排序。然后我用新数组绘制图表并修复图表