使用json数据构建C3.js图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用json数据构建C3.js图相关的知识,希望对你有一定的参考价值。

我正在尝试使用从mysql数据库中使用php抓取的数据构建c3.js折线图。

 var chart = c3.generate({
  bindto: '#linear-chart',
  data: {
    json:lineChartData,
    keys:{
      value: ['date', 'temp'],
    }
  },
  zoom: {
    enabled: true
  }
});

lineChartData - 来自mysql的json数据,如下所示:

[{date: Wed Mar 13 2019, temp: 200},{.......}]

应该如何将json数据发送到c3.js?

答案

您可以通过执行以下操作轻松地将json数据回显到C3.js:

var dataset = <?php echo $lineChartData; ?>; 
data: { 
    json: dataset
    }

我正在使用您用于我的Web项目的相同管道(mySQL-PHP-C3.js)。重要的是,您的json数据完全采用C3输入所需的格式。正如您可以在C3.js文档(https://c3js.org/samples/timeseries.html)中读到的那样,时间序列的数据格式应如下所示:

data: {
       x: 'x',
       //  xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
       columns: [
           ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       //  ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
           ['data1', 30, 200, 100, 400, 150, 250],
           ['data2', 130, 340, 200, 500, 250, 350]
         ]
      },
axis: {
       x: {
           type: 'timeseries',
           tick: {
             format: '%Y-%m-%d'
           }
         }
       }

对于我的数据(不是时间序列数据),json对象如下所示:

{"data1": [0.23, 0.29, 0.19, 0.14, 0.7], "data2": [0, 0.25, 0.61, 0.4, 0.52]}

如果您遵循此结构并将时间数据(日期)作为第三维添加到其中,您应该能够达到您想要的效果。

以上是关于使用json数据构建C3.js图的主要内容,如果未能解决你的问题,请参考以下文章

C3.js入门案例

如何在 JSON 中为 v3 YouTube API 上传构建片段和状态

更改 c3.js 散点图中气泡的大小

实用代码片段将json数据绑定到html元素 (转)

如何在 Donut Legend 的 C3.js 中显示值?

用 d3.js / c3.js 替换图表数据集