c3JS 加载函数

Question

1. 我正在制作看起来像这样的 c3js 图表：

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

2. 然后我尝试从它的 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 部分设置：名称：arg[1][0] - 它确实有效。但是我将无法使用此功能从不同的数组中绘制不同的线。我究竟做错了什么 ？谢谢。

Answer 1

从 '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 对象中的键未硬编码为“姓名”或“年龄”字符串。 希望这对你有用。

Answer 2

以下示例运行良好，在不同的数组中定义了多行。-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 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',
        },
      }); 


    }