将JSON文件与chart.js一起使用 [英] Use JSON file with chart.js

问题描述

我一直在寻找与 chart.js 相关的问题，但是似乎没有两个开发人员对如何使用<$显示图表给出了相同的答案。 c $ c> chart.js + JSON。

我正在尝试使用JSON文件显示图表-特别是金额列表

图表画布显示的很好，没有控制台日志错误，但没有图表本身。

我想念什么？

谢谢！

这是我的chart.js代码：-

  var标签= []； 
 var data = []; 
 
 $ .getJSON（ https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c），函数（数据）{
 $ .each（ data.customers.amounts，function（key，value）{
 var labels = json.map（function（item）{
 labels.push（item.key）; 
}）; 
 var data = json.map（function（item）{
 data.push（item.value）; 
}）; 
}）; 
} 
 
 var ctx = document.getElementById（’myChart’）。getContext（’2d’）; 
 var chart = new Chart（ctx，{
 type：'line'，
数据：{
数据集：[{
标签：标签，
 backgroundColor：'rgb（129，198，2228）'，
 borderColor：'rgb（0，150，215）'，
 data：data 
}] 
}，
选项：{
回应： true，
} 
}）； 
  

这是我的JSON文件：-

  {
 customers：[
 {
 first_name： John，
 last_name： Doe，
 account： 123456，
 period： 7月13日至8月13日，
 due_date： 9月14日，
金额：[
 [ 2017年1月，121.23]，
 [ 2017年2月，145.23]，
 [ 2017年3月，55.12]，
 [ 2017年4月，78.58] ，
 [ 2017年5月，89.13]，
 [ 2017年6月，45.78]，
 [ 2017年7月，90.22] 
] 
} 
] 
} 
  

解决方案

问题：

• 由于 $。getJSON（） 方法是异步的，您应该在的回调函数。


• 您正在遍历re错误地误打数据。可能很简单：

  var labels = data.customers [0] .amounts.map（function（e）{
 return e [0]; 
}）; 
 
 var data = data.customers [0] .amounts.map（function（e）{
 return e [1]; 
}）; 
  

• 您要添加 标签 数组添加到数据集中，同时将其记录为 data 对象。

这是您代码的修订版：

  $。getJSON（ https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c，函数（数据）{var标签= data.customers [ 0] .amounts.map（function（e）{return e [0];}）; var data = data.customers [0] .amounts.map（function（e）{return e [1];}）; var ctx = document.getElementById（'myChart'）。getContext（'2d'）; var chart = new Chart（ctx，{type：'line'，data：{标签：标签，数据集：[{backgroundColor：'rgb（129 ，198，2228）'，borderColor：'rgb（0，150，215）'，数据：数据}]}，选项：{响应：'true'，}}）;}）;  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < script src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js>< / script>< canvas id = myChart> ;< / canvas>  

I've been looking all over chart.js-related questions, but not two developers seem to be giving the same answer on how to display a chart using chart.js + JSON.

I am trying to display a chart using a JSON file - specifically a list of "amounts" with their relative labels ("January 2017",...).

The chart canva display just fine, no console log error, but no chart itself. What am I missing?

Thanks!

Here my chart.js code:-

var labels = [];
var data = [];

$.getJSON("https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c"), function (data) {
  $.each(data.customers.amounts, function(key, value){
    var labels = json.map(function(item) {
      labels.push(item.key);
   });
    var data = json.map(function(item) {
      data.push(item.value);
   });
   });
}

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            labels: labels,
            backgroundColor: 'rgb(129, 198, 2228)',
            borderColor: 'rgb(0, 150, 215)',
            data: data
        }]
    },
    options: {
      responsive: 'true',
    }
});

and here's my JSON file:-

{
  "customers": [
    {
      "first_name": "John",
      "last_name": "Doe",
      "account": "123456",
      "period": "13th July - 13th August",
      "due_date": "14th September",
      "amounts": [
        ["January 2017", 121.23],
        ["February 2017", 145.23],
        ["March 2017", 55.12],
        ["April 2017", 78.58],
        ["May 2017", 89.13],
        ["June 2017", 45.78],
        ["July 2017", 90.22]
      ]
    }
  ]
}

解决方案

Couple of Issues :

• since $.getJSON() method is asynchronous, you should construct the chart inside it­'s callback function.
• you are looping through the response data incorrectly. could be as simple as :

­

    var labels = data.customers[0].amounts.map(function(e) {
       return e[0];
    });

    var data = data.customers[0].amounts.map(function(e) {
       return e[1];
    });

• you are adding labels array to your dataset, while it belogns to the data object.

Here is the revised version of your code :

$.getJSON("https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c", function(data) {
   var labels = data.customers[0].amounts.map(function(e) {
      return e[0];
   });
   var data = data.customers[0].amounts.map(function(e) {
      return e[1];
   });

   var ctx = document.getElementById('myChart').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: labels,
         datasets: [{
            backgroundColor: 'rgb(129, 198, 2228)',
            borderColor: 'rgb(0, 150, 215)',
            data: data
         }]
      },
      options: {
         responsive: 'true',
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于将JSON文件与chart.js一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！