如何加载 json 编码数组作为 c3.js 的 x-axis？

Question

差不多就是标题。我有一个序列号数组，我想将它们设为 x-axis。数组数据本身是通过 PHP 从数据库中提取的。然后我json_encode'd它并把它做成一个js数组。我遇到的问题是 json: 和 columns: 在生成 C3js 图形时都有一个单独的部分。

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-axis。不过我没有看到他们将两者结合起来的部分。

Answer 1

如果我理解正确，您希望能够在使用 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/

如何加载 json 编码数组作为 c3.js 的 x-axis？

How does one load a json encoded array as the x-axis for c3.js?

javascript

php

arrays

json

c3.js