x 没有为 id = "0" - C3.js 堆叠条形图定义

Question

我收到错误：未捕获错误：未为 id =“0”定义 x。尝试将数据传递到 c3.js 时间序列图表时。

https://c3js.org/samples/timeseries.html

我尝试将列中的变量用作

列：json_beams 和 json：json_beams

如下代码所示。

c3.js 提供的基本代码工作正常

这是我的 javascript 变量 json_beams 的输出。

这是我将数组传递给 javascript 的方式：

<script>
  var json_beams = "<?php echo addslashes(json_encode($data1)); ?>";
</script>

默认时间序列列：

      columns: [
          ['x', '00:00:00', '01:00:00', '02:00:00', '03:00:00', '04:00:00', '05:00:00'],
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 130, 340, 200, 500, 250, 350]
       ]

控制台中 json_beams 变量的输出是：（注意：将其直接粘贴到 Columns: 中效果很好。

[["x","00:00:00","01:00:00","02:00:00","03:00:00","04:00:00","05:00:00","06:00:00","07:00:00","08:00:00","09:00:00","10:00:00","11:00:00","12:00:00","13:00:00","14:00:00","15:00:00","16:00:00","17:00:00","18:00:00","19:00:00","20:00:00","21:00:00","22:00:00","23:00:00","24:00:00"],["Beam 0","836","1141","1339","910","655","303","307","211","345","277","235","225","236","239","213","200","190","207","648","937","973","1076","1108","1075"],["Beam 1","913","1152","1333","939","708","326","323","297","394","292","266","244","271","257","231","210","224","190","754","1023","997","1035","1141","1044"]

我的代码：

    <script>
var chart = c3.generate({
    data: {
        x: 'x',
        xFormat: '%H:%M:%S',
      columns: json_beams
       ]
//         json: json_beams
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%H:%M:%S'
            }
        }
    }
});

产生的错误是：

未捕获错误：未为 id =“0”定义 x。

无论加到'columns:'还是'json:'

Answer 1

根据https://www.php.net/manual/en/function.addslashes.php addSlashes returns a string. In the section 'columns: json_beams' json_beams should be an array of arrays. You will need to convert the string into an array. This tutorial might help: https://jonsuh.com/blog/convert-loop-through-json-php-javascript-arrays-objects/

当您复制并粘贴它而不是使用变量时它起作用的原因是它不再是字符串。

x 没有为 id = "0" - C3.js 堆叠条形图定义

x is not defined for id = "0" - C3.js stacked bar chart

javascript

c3.js