Question

如何为我的chart.js图表遍历chartObject JavaScript数组数据？当我引用单个元素（即chartObject[0][0]）时，我就可以使用它了，但是我无法使用循环来实现它。

    <script>

    const requestURL =
  url;
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    doWithResponse(request.response);
  }
};

function doWithResponse(chart) {
  var chartObject = JSON.parse(chart)
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
      labels: [
        chartObject[0][0],
        chartObject[0][1],
        chartObject[0][2],
        chartObject[0][3],
        chartObject[0][4],
        chartObject[0][5],
        chartObject[0][6],
        chartObject[0][7],
        chartObject[0][8],
        chartObject[0][9]
      ],
      datasets: [
        {
          label: "Frequency",
          data: [
            chartObject[1][0],
            chartObject[1][1],
            chartObject[1][2],
            chartObject[1][3],
            chartObject[1][4],
            chartObject[1][5],
            chartObject[1][6],
            chartObject[1][7],
            chartObject[1][8],
            chartObject[1][9]
          ],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)"
          ],
          borderWidth: 2
        }
      ]
    },
    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
    },
    title: {
            display: true,
            text: 'Test Count'
    }
  });
}
    </script>

Answer 1

这里不需要任何循环，只需要从特定的createObject索引中获取值，但是由于chartObject是对象，因此您需要在传递数据时进行复制以具有不变性因此您可以使用...或slice或map进行复制

您只需使用... spread syntax，

data : {
  labels : [...chartObject[0]],
  datasets: [{
    label: 'frequency',
    data: [...chartObject[1]],
    ...
  }]
}

如果您确定传递给Chart的值不会改变原始状态，则可以将其直接传递为

data : {
  labels : chartObject[0],
  datasets: [{
    label: 'frequency',
    data: chartObject[1],
    ...
  }]
}

Answer 2

您可以使用Array.prototype.map：

labels: chartObject[0].map((x, i) => chartObject[0][i]), 
datasets: [{
    label: "Frequency",
    data: chartObject[1].map((x, i) => chartObject[1][i])
}]

遍历数组以获取chart.js输入

2 个答案: