【问题标题】:why does C3 chart does not work when parameter is provided as String?当参数作为字符串提供时,为什么 C3 图表不起作用?
【发布时间】:2015-12-15 07:18:30
【问题描述】:

我有 C3 图表,它在直接提供列时有效,但在作为字符串参数提供时无效。

这里是 jsfiddle: http://jsfiddle.net/q8h39/79/

Javascript 代码:

 dataval = "[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]";

 var chart = c3.generate({
   bindto: '#chart1',
   data: {
     x: 'x',
     xFormat: '%Y-%m-%d %H:%M:%S', // 'xFormat' can be used as custom format of 'x'
     columns: dataval
   },
   axis: {
     x: {
       type: 'timeseries',
       tick: {
         format: '%Y-%m-%d %H:%M:%S'
       }
     }
   }
 });

【问题讨论】:

    标签: javascript d3.js c3.js


    【解决方案1】:

    原因是这是一个字符串(用双引号括起来)

    "[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]"
    

    这是一个数组对象:

    [['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]
    

    在 c3 中 columns 需要一个数组对象而不是字符串

    编辑

    要将您传递的字符串转换为 JSON 数组,请执行以下操作:

    dataval = "[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]";
    dataval = dataval.replace(/'/g, "\"");//replacing single quotes with double quotes
    dataval = JSON.parse(dataval);
    

    工作代码here

    希望这会有所帮助!

    【讨论】:

    • 我发现了,但是如果我从 java 提供这个参数并将它存储在变量中。
    • 我已经对答案投了赞成票,但我的数据仍然有问题 Uncaught Error: x is not defined for id 。我也可以在控制台中看到数组。
    • 更正了你写的代码dataval = dataval.replace(/'/g, "\'");,但它应该是dataval = dataval.replace(/'/g, '\"');这里小提琴jsfiddle.net/cyril123/5k4c19jw/3
    猜你喜欢
    • 2014-06-17
    • 1970-01-01
    • 1970-01-01
    • 2020-07-04
    • 1970-01-01
    • 2014-04-19
    • 1970-01-01
    • 2020-09-30
    • 1970-01-01
    相关资源
    最近更新 更多