使用 json 数据构建 C3.js 图表
Building C3.js graph using json data
我正在尝试根据使用 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]}
如果您遵循此结构并将您的时间数据(日期)作为第三维度添加到其中,您应该能够实现您想要的。
我正在尝试根据使用 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]}
如果您遵循此结构并将您的时间数据(日期)作为第三维度添加到其中,您应该能够实现您想要的。