如何在我的数组上使用 forEach 循环在我的图表上绘制 x 和 y 变量 (Chart.js)

Question

我正在尝试使用 forEach 循环遍历包含我的 x 和 y 变量的数组，并将它们绘制在我的图表上。但是，它没有正确地遍历数组，当我 console.log 该项目时，只会输出前两个索引。

这是 forEach 循环之前的数组。

newArray = [
    [
        68.7,
        6069.793943786011
    ],
    [
        69.1,
        5879.904689004858
    ],
    [
        69.3,
        5784.960061614278
    ],
    [
        71.1,
        4930.458415099063
    ],
    [
        71.8,
        4598.152219232035
    ],
    [
        73,
        4028.4844548885576
    ],
    [
        73.2,
        3933.539827497977
    ],
    [
        73.6,
        3743.6505727168224
    ],
    [
        74.5,
        3316.399749459213
    ],
    [
        74.7,
        3221.4551220686317
    ],
    [
        74.8,
        3173.9828083733455
    ],
    [
        75.6,
        2794.2042988110297
    ],
    [
        75.7,
        2746.7319851157354
    ],
    [
        76.5,
        2366.9534755534196
    ],
    [
        76.6,
        2319.4811618581325
    ],
    [
        77.2,
        2034.647279686391
    ],
    [
        77.4,
        1939.7026522958095
    ],
    [
        78.4,
        1464.9795153429131
    ],
    [
        78.6,
        1370.034887952339
    ],
    [
        78.8,
        1275.0902605617584
    ],
    [
        80.1,
        657.9501825229945
    ],
    [
        80.4,
        515.5332414371196
    ],
    [
        80.6,
        420.58861404654635
    ],
    [
        81,
        230.69935926538437
    ],
    [
        81.7,
        0
    ],
    [
        82.4,
        0
    ],
    [
        83.1,
        0
    ],
    [
        83.3,
        0
    ],
    [
        83.7,
        0
    ],
    [
        83.8,
        0
    ]
]

这是我循环遍历数组后的输出，里面只有 console.log 而不是图表。

newArray.forEach(function (item){
     console.log(item)
})
 [68.7, 6069.793943786011]
 [69.1, 5879.904689004858]
 [69.3, 5784.960061614278]
 [71.1, 4930.458415099063]
 [71.8, 4598.152219232035]
 [73, 4028.4844548885576]
 [73.2, 3933.539827497977]
 [73.6, 3743.6505727168224]
 [74.5, 3316.399749459213]
 [74.7, 3221.4551220686317]
 [74.8, 3173.9828083733455]
 [75.6, 2794.2042988110297]
 [75.7, 2746.7319851157354]
 [76.5, 2366.9534755534196]
 [76.6, 2319.4811618581325]
 [77.2, 2034.647279686391]
 [77.4, 1939.7026522958095]
 [78.4, 1464.9795153429131]
 [78.6, 1370.034887952339]
 [78.8, 1275.0902605617584]
 [80.1, 657.9501825229945]
 [80.4, 515.5332414371196]
 [80.6, 420.58861404654635]
 [81, 230.69935926538437]
 [81.7, 0]
 [82.4, 0]
 [83.1, 0]
 [83.3, 0]
 [83.7, 0]
 [83.8, 0]

然后我使用 forEach 并尝试在我的图表上迭代它，就像这样。但是，此方法不会填充图表，并且唯一记录到控制台的是前两项。如果有人对我如何成功循环我的数组以绘制 x 和 y 变量有任何建议，将不胜感激！谢谢！

 [68.7, 6069.793943786011]
 [69.1, 5879.904689004858]

 newArray.forEach(function (item) {
                console.log(item)
                const config = {
                    data: {
                        datasets: [{
                            type: 'line',
                            label: 'Low Limit',
                            data: [{
                                x: item[0],
                                y: item[1]
                            }],
                            fill: false,
                            pointRadius: 0,
                            tension: 0.1,
                            borderColor: 'rgb(0, 128, 0)',
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                };
                let ctx = document.getElementById('myChart').getContext('2d');
                let myChart = new Chart(ctx, config);
            })

Answer 1

你可以这样试试

 newArr.forEach((items) => 
            console.log(items)
            let values = {
                items[0], items[1]
             }
let ctx = document.getElementById('myChart').getContext('2d');
                let myChart = new Chart(ctx, values);
        )

Answer 2

我认为您要的是散点图，而不是折线图

const config = {
      data: {
          datasets: [{
              type: 'scatter',
              label: 'Low Limit',
              data: newArr.map(a => { return { x: a[0], y: a[1]  } }),
              fill: false,                            
              borderColor: 'rgb(0, 128, 0)',
          }]
      },
      options: {
          scales: {
               y: {
                    beginAtZero: true
               }
          }
       }
};

Example JSFiddle

Answer 3

我认为问题是因为您在数组的每次迭代中都创建了配置属性。

在下面的代码中，我建议您只使用 'map' 来定义属性 x 和 y，并将它们传递给配置一次。

const config = {
    data: {
        datasets: [{
            type: 'line',
            label: 'Low Limit',
            data: newArray.map(([x, y]) => { x, y }),
            fill: false,
            pointRadius: 0,
            tension: 0.1,
            borderColor: 'rgb(0, 128, 0)',
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
};

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

Answer 4

如果使用 Object.fromEntries()

，则根本不需要 for 循环

const entries = new Map(newArray);
const obj = Object.fromEntries(entries);

var data = {
    datasets: [{
        label: 'My First Dataset',
        data: obj,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
    }]
};

const config = {
    type: 'line',
    data: data,
    options: { 
        animation: false,
    }
};


var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, config);

这是一个JSFiddle.

如何在我的数组上使用 forEach 循环在我的图表上绘制 x 和 y 变量 (Chart.js)

How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)

javascript

arrays

foreach

jquery

chart.js