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 =＆＃34;名称＆＃34;。定义x 如果我在xs部分设置：名称：arg [1] [0] - 它确实有效。但是，我将无法使用此功能从不同的数组中绘制不同的行。我究竟做错了什么？谢谢。

Answer 1

使用“arg”2D数组设置键/值为通用的工作代码： - 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 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',
        },
      }); 


    }

c3JS加载功能

3 个答案: