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

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

javascript json ajax chart.js

Javascript 将JSON导入chart.js的数据和标签,javascript,json,ajax,chart.js,Javascript,Json,Ajax,Chart.js,我有一个基本的javascript应用程序，它应该以以下形式导入json文件： [{ "name": "John", "group": "Schools", "amount": "850" }, { "name": "Martin", "group": "Private Students", "amount": "10050" }] 并将其与chart.js一起使用，使用“group”部分作为标签，分别按“amount”部分添加到数据中。有人能帮忙吗？我让它使用固定值工作，但似乎无法正确导入

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

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

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

并将其与chart.js一起使用，使用“group”部分作为标签，分别按“amount”部分添加到数据中。有人能帮忙吗？我让它使用固定值工作，但似乎无法正确导入和解析文件

到目前为止，主文件如下所示，标签尚未定义：

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


金钱的东西
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
//$.getJSON（“moneyFile.json”，函数（数据）{
//var标签=[]；
//var数据=[]；
//
//$.each（数据、功能（组、金额）{
//标签。推（组）；
//数据推送（金额）；
//   });
// }
//var data=jQuery.getJSON（“moneyFile.json”）；
//log（JSON.stringify（data，null，2））；
var data=JSON.parse（moneyFile）；
console.log（数据[0]）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：标签，
数据集：[{
标签：'金钱在'，
//数据：
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
‘rgba（153102255,0.2）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

您需要将数据映射到所需的格式。CartJs需要

数据

参数，该参数采用这种格式

数据：[{x:'2016-12-25'，y:20}，{x:'2016-12-26'，y:10}]

这样您就可以做些什么了

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

控制台中有任何错误吗？在哪里定义了

moneyFile

？您需要使用AJAX获取数据frm

moneyFile.json

（

XMLHttpRequest

，

fetch

，或者（如果必须），您可以使用

jQuery.getJSON

）我刚刚上传了其余的代码，你能实现它来告诉我它是如何工作的吗？我似乎也不能仅仅导入json文件；现在的情况是，控制台告诉我moneyFile是未定义的当然

moneyFile

是未定义的-你还没有定义它