Question

我有一个基本的javascript应用程序，应该以以下形式导入json文件：

[{
"name": "John",
"group": "Schools",
"amount": "850"
},

{
"name": "Martin",
"group": "Private Students",
"amount": "10050"
}]

并将其与chart.js一起使用，使用＆＃39;组＆＃39; part作为标签，并通过＆＃39;添加到数据中。部分分别。有人可以帮忙吗？我使用固定值，但似乎无法正确导入和解析文件

到目前为止，主文件看起来像这样，标签尚未定义：

<!DOCTYPE HTML>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="moneyFile.json"></script>
<head>
  <title>Money Thingy</title>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    var ctx = document.getElementById("myChart").getContext('2d');

   //  $.getJSON("moneyFile.json", function(data) {
   //   var labels = [];
   //   var data = [];
   //
   //   $.each( data, function( group, amount ) {
   //     labels.push(group);
   //     data.push(amount);
   //   });
   // }

   // var data = jQuery.getJSON("moneyFile.json");
   // console.log(JSON.stringify(data, null, 2));

   var data = JSON.parse(moneyFile);
   console.log(data[0]);

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: labels,
          datasets: [{
              label: 'Money in',
              // data:
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
    });
  </script>
  </body>
</html>

Answer 1

您需要将数据映射到所需的格式。 CartJs需要data参数，其格式为data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]，因此您可以执行某些操作

data: jsonData.map(item => ({x: item.group, y: Number(item.amount)}));

将JSON导入chart.js的数据和标签

1 个答案: