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

Posted 2023-02-22

【中文标题】从 jsonfile 数据创建多个 chart.js 图表

【英文标题】：Create multiple chart.js charts from jsonfile data

【发布时间】：2022-01-23 07:07:43

【问题描述】：

我使用 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>

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

【讨论】：

感谢您的帮助。可以使用我上面给出的 url 并获取 JSON 来展示它是如何工作的吗？我不知道如何修改代码来做到这一点。再次感谢！

@ade1e 我将实现我刚刚将响应立即嵌入到变量

@ade1e 完成，现在您可以在编辑器上复制过去，一切顺利

@ade1e 确保 html 代码中 id 为 myChart 的元素是空 div <div id="myChart"></div> 而不是画布