问题：

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

巫健柏

2023-03-14

我创建了一个json文件使用python这是一个列表。每个子列表都有chart.js图表的数据，即对于x和y轴，chartObject[0]具有chartObject[0][0]和chartObject[0][1]。

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

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

如何循环遍历下面代码中列出的json文件并创建多个chart.js图表？i、 e.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个答案

杜河

2023-03-14

您可以这样做：

 <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>

类似资料：

使用Chart.js创建多折线图

我正在尝试使用图表创建多行图表。js 我可以使用固定的数据结构对1行和2行执行此操作，但我无法使用多行来显示传递给数据结构的数据。下面是从图表中缩写出来的示例用法。js网站 http://www.chartjs.org/docs/#getting-started 现在我的代码，图表始终显示相同的最后生成的行4次。我是javascript新手，我确信我在创建对象结构时犯了一些错误，我花了一天的
使用chart.js从django创建动态图表

我刚到姜戈。我目前正在通过推特应用编程接口对实时用户推文进行情感分析。我已经设法做了分析和表达情感。现在，我想在我的Django应用程序中使用图表（也许是条形图或饼图）来可视化情感，但我不确定如何实现。我在考虑使用图表。js使其具有响应性，但大多数示例都使用静态数据，因此我没有成功地将从Twitter API提取的数据与图表集成。js。这是我的网页截图。这张表格是摘录的推特及其相应的情感。然而
SQL-从多个表创建视图

问题内容：我有三个表：我正在尝试创建一个视图，例如：到目前为止，这是我的代码。我认为这是不正确的：一个问题是，存在的国家可能不在中。一年也是如此。存在的年份可能不存在。因此，我一直认为上述代码无法正常工作。问题答案：谢谢您的帮助。这就是我为了使它工作而最终要做的事情。
从数据数组创建javafx图像

我正在编写一个图像处理应用程序，使用javafx作为gui，我想在屏幕上显示处理过的图片。我的程序将图像处理为三维双数组，如double[3][1080][1920]，因此我必须减少图像的颜色空间，并将双数组转换为byte或（如果可能）shorts，因为javafx的ImageView不支持浮点值或每个RGB组件的64位。我发现，Imageview只能从文件或inputstream加载数据，因此我
Chart.js具有一个通用图例的多个图表

可能吗？怎样我曾尝试在多个图表、一个图例、多个图表Chart js等上切换Chart.js sync legend。但是，这些解决方案有一个带有图例的图表，并且该图例会影响其他图表。我应该隐藏图表并只显示图例吗？我应该画一张没有数据的图表吗？如果你能告诉我，我就毕业了 HTML JS
从单个数据帧创建多个子集，无需替换

我正在尝试创建5个成员的10个不同子集，而不需要替换这些数据（在Python中）：我尝试使用random.sample（）的许多变体来表示范围内的。什么都没用。到目前为止，堆栈溢出似乎没有给我提供所需的结果。

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档