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

Posted 2023-05-09

【中文标题】如何在我的数组上使用 forEach 循环在我的图表上绘制 x 和 y 变量（Chart.js）

【英文标题】：How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)

【发布时间】：2021-11-16 10:35:42

【问题描述】：

我正在尝试使用 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);
            )

【参考方案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);
        )

【讨论】：

我仍然需要添加所有其他配置选项。

【参考方案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

【参考方案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);

【参考方案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.

【讨论】：

这实际上破坏了顺序，因为值像字符串一样排序。哦，javascript。