Question

我正在尝试在c3.js中创建一个图表，而我的数据来自外部API。我想从json数据中获取数据和键，以便我可以在图表上绘制值。我在下面添加了外部api格式和js代码。

JSON DATA：

[{ 
      "label" : "A Label" ,
      "value" : -29.765957771107
    } , 
    { 
      "label" : "B Label" , 
      "value" : 0
    } , 
    { 
      "label" : "C Label" , 
      "value" : 32.807804682612
    } , 
    { 
      "label" : "D Label" , 
      "value" : 196.45946739256
    }]

JS代码：

d3.json("http://localhost:8080/api/study", function(data) {
    var chart = c3.generate({
        bindto : '#chartContainer',
        data : {
            columns : ['label']
        },
         keys: {
            x: 'label',
            value: ['value']
        }
    });
});

谢谢

Answer 1

将API数据预处理为C3所需的格式。它应该是直截了当的：

var convertedData = [];
apiData.forEach(function(item){
    convertedData.push([item.label, item.value]);
});

以下是一个示例：http://jsfiddle.net/jrdsxvys/2/

编辑：如果您想要将JSON数据选项与值数组一起使用，那么它将是这样的，您可以在其中设置json属性和keys对象：

var chart = c3.generate({
    data: {
        json: data,
        keys: {
            x: 'label',
            value: ["value"]
        },
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category'
        }
    },
    legend: {
        show:false
    }
});

小提琴：http://jsfiddle.net/jrdsxvys/4/

C3.js通过从外部API获取数据来创建图表

1 个答案: