将JSON数据解析为C3.js图表​​的数组

时间:2018-06-01 22:45:42

标签: javascript json c3.js

我将以这种格式将django的json变量发送到C3.js:

{
   datetime.date(2015, 5, 1): 22792461.479999978, 
   datetime.date(2015, 6, 1): 24807797.38999998, 
   datetime.date(2015, 7, 1): 25261456.609999962
}

我需要提取值并将它们编译成一个可供c3.js使用的数组。这是我的剧本:

<script>
   {% include "croydon_dashboards/dashboard_includes/gb_locale.html" %}

   var row_value = {{ row_value }};
   var sum_list = [];

   for(var i in row_value)
      sum_list.push(row_value[i])

   sum_list = JSON.stringify(sum_list);

   var chart = c3.generate({
       data: {
          columns: [
              sum_list
          ],
          type: 'bar'
       },
        bar: {
           width: {
              ratio: 0.5
           }
       }
   });
</script>

图表中的硬编码值有效,所以我知道c3.js是正确的,但是我构建数组的方式有问题。

我知道这里有一个答案:JSON Data doesn't show on c3.js bar chart

但我是javascript的新手,无法解决如何解析我正在使用的json。

1 个答案:

答案 0 :(得分:0)

您无需 JSON.stringify()您的数据即可将其与c3一起使用。
但你可能必须 JSON.parse()它才能使它看起来像这样:

var row_value = {
   "2015-05-01": 22792461.479999978, 
   "2015-06-01": 24807797.38999998, 
   "2015-07-01": 25261456.609999962
};

不要忘记在数据数组的开头添加文本标签:

// This first value of array if the name of your data
 var sum_list = ['something'];

其余代码可以使用。

 for(var i in row_value)
    sum_list.push(row_value[i])


 var chart = c3.generate({
     data: {
        columns: [
            sum_list
        ],
        type: 'bar'
     },
      bar: {
         width: {
            ratio: 0.5
         }
     }
 });

请参阅 this fiddle