Question

我已经使用python创建了一个json文件，它是一个列表列表。每个子列表都有一个chart.js图表的数据，即chartObject[0]的x和y轴分别为chartObject[0][0]和chartObject[0][1]。

这是包含列表和子列表的json。

下面的代码创建一个图表，但是我想遍历所有条目并为每个子列表（图表的多个实例）创建图表。

如何遍历下面代码中列出的json文件并创建多个chart.js图表？即chartObject[0]，chartObject[1]等的图表。

<script>

    const requestURL =
  "http://secstat.info.s3.eu-west-2.amazonaws.com/testthechartdata001.json";
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]],
      datasets: [
        {
          label: "Frequency",
          data: [...chartObject[1]],
          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: {
        title: {
                display: true,
                text: 'Threat Count'},
    legend: {
                    display: false
                }     ,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
    }
    }
  });
}
    </script>

Answer 1

您可以这样操作：

 <script>
   const requestURL =
   "http://secstat.info.s3.eu-west-2.amazonaws.com/testthechartdata001.json";
 const request = new XMLHttpRequest();
 request.open("GET", requestURL);
 request.send();

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

   }
 };

 function doWithResponse(chart) {
   const chartObject = JSON.parse(chart)
   var canvasArray = [];
   for (let i = 0; i < chartObject.length / 2; i++) {
     document.getElementById('myChart').innerHTML += "<canvas id=c" + i + "></canvas>";
     var ctxPrep = "c" + i;
     canvasArray.push(ctxPrep)
   }
   var el = 0;
   for (let i = 1; i <= chartObject.length - 1; i = i + 2) {
     var ctx = document.getElementById(`${canvasArray[el]}`).getContext("2d");
     el++
     var myNewChart = new Chart(ctx, {
       type: "horizontalBar",
       data: {
         labels: chartObject[i - 1].map((x, index) => chartObject[i - 1][index]),
         datasets: [{
           label: "Frequency",
           data: chartObject[i].map((x, index) => chartObject[i][index]),
           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: {
         title: {
           display: true,
           text: 'Threat Count'
         },
         legend: {
           display: false
         },
         scales: {
           yAxes: [{
             ticks: {
               beginAtZero: true
             }
           }]
         }
       }
     });
   }
   }
 </script>

从jsonfile数据创建多个chart.js图表

1 个答案: