c3JS 加载函数

Question

我正在制作如下所示的 c3js 图表：

var chart = c3.generate({
    bindto: '#chart',
    data: {
    columns: []
    }
});

然后我尝试使用它的 api 中的加载函数：

var data =  [["Name", "15", "30", "45"], ["x", "1", "2", "3"]];

function update_graph(arg) {
var tmp = arg[0][1];
chart.load({
    xs: {
        tmp : arg[1][0]  //binding data to x here and getting an error
    },
    columns: [
        arg[0],
        arg[1]
    ],
});
}
update_graph(data);

我得到：未捕获错误：没有为 id = "Name".
定义 x 如果我在 xs 部分设置： Name : arg[1][0] - 它确实有效。但是这样我就不能用这个函数从不同的数组中画出不同的线了。我究竟做错了什么？谢谢。

Answer 1

以下示例工作正常，在不同的数组中定义了多行。- jsFiddle

var chart = c3.generate({
bindto: '#chart',
data: {
   columns: []
}
});


var data =  [["Name", "15", "30", "45"], ["x", "1", "2", "3"], ["Age", "45", "38", "25"], ["y", "1", "2", "4"]];

function update_graph(arg) {
  var tmp = arg[0][1];
  chart.load({
   xs: {
    Name : arg[1][0],
    Age : arg[3][0]  //binding data to x here and getting an error
   },
   columns: [
     arg[0],
     arg[1],
     arg[2],
     arg[3],
   ],
 });
}
update_graph(data);

不确定是什么问题，您使用的是哪个版本的 c3js 库？请参考c3js例子：- c3js Example

Answer 2

使key/value设置为'arg'二维数组通用的工作代码：- jsFiddle

解决方案是先构造 xs 对象，如：-

var xs = {};
xs[arg[0][0]] = arg[1][0];
xs[arg[2][0]] = arg[3][0];

然后在 chart.load 函数中使用 xs 对象，如：-

chart.load({
  xs: xs,
  columns: [
    arg[0],
    arg[1],
    arg[2],
    arg[3],
  ],
});

请注意，xs 对象中的键未硬编码为 'Name' 或 'Age' 字符串。希望这对你有用。

Answer 3

  $scope.barchart = function(data,id,chtype,keydata)
    {      
       var xs1 = {};
        var key1 = $scope.obj.key;
        var data1 = $scope.obj.data;
        xs1[key1] = data1;

       var id = c3.generate({
        bindto : '#'+id,
        data: {
            xs:xs1,
            columns: data,
            type: 'scatter',
        },
      }); 


    }

c3JS 加载函数

c3JS Load Function

javascript

d3.js

c3.js