和标题差不多。我有一个序列号数组,我想将其作为 x 轴。数组数据本身是通过 PHP 从数据库中获取的。然后我对它进行 json_encode 并将其放入 js 数组中。我遇到的问题是,生成 C3js 图表时,json: 和 columns: 有一个单独的部分。
var jsarray = <?php echo json_encode($array) ?>;
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'js_array',
columns: [
['x', js_array]
],
json: {
Data_points,
Data_points2
},
axis: {
y: {
label: { // ADD
text: 'Y axis title',
position: 'outer-middle'
}
}
}
});
我尝试在 c3.js 文档中查找示例,但它们对于 JSON 数据和格式化 x 轴有单独的部分。但我没有看到他们将两者结合起来的部分。
最佳答案
如果我理解正确的话,您希望能够在使用 JSON 数据时标记 X 轴数据点,有点像这个示例:http://c3js.org/samples/data_stringx.html ?
假设您的 PHP 中有如下所示的数据:
$php_data = array(
'x_labels' => array('MON', 'TUE', 'WED', 'THU', 'FRI'),
'data1' => array(30, 200, 100, 400, 150, 250),
'data2' => array(50, 20, 10, 40, 15, 25)
);
...那么您应该能够使用 JSON 数据实现与上面示例类似的效果,如下所示:
var json_data = <?php echo json_encode($php_data) ?>;
var chart = c3.generate({
bindto: "#chart",
data: {
x: 'x_labels',
json: json_data
},
axis: {
x: {
type: 'category'
},
y: {
label: 'number'
}
}
});
data: { x: 'x_labels' }
部分告诉库使用轴标签处数组键“x_labels”下的数据,然后在 axis: { x : { type: 'category' } }
,我们指定要使用字符串而不是数字作为标签类型。如果您的轴标签是数字(例如 'x_labels' => array(1, 2, 3, 4, 5)
),则不必指定此项。
如果你想玩一下,这里有一个 jsfiddle: https://jsfiddle.net/WingZero/Ldk4shLz/3/
关于javascript - 如何加载 json 编码数组作为 c3.js 的 x 轴?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35091120/