Question

我尝试使用this example来创建C3图表。但是它使用了api中的所有数据。我正在使用angularjs。

我的数据看起来像这样 [ 编号：1 名称： 'ABC' ID：3 值：34 ]

这是我的代码

d3.json("http://api.mydata", function(data) {
    var convertedData = [];
data.forEach(function(item){
    convertedData.push([item.Id, item.Value]);
});
    var chart = c3.generate({
        bindto : '#chartContainer',
        data : {
            columns : [convertedData]
        },
         keys: {
            x: convertedData.ID,
            value: convertedData.Value
        }
    });
});

感谢

Answer 1

data字段也必须填充有关轴的信息。这里有一个功能示例（对不起西班牙语变量）：

 var chart = c3.generate({
            bindto: "#chart-" + value.siglas,
            data: {
                x: 'x',
                x_format: '%Y',
                columns: [
                    ['x', new Date('2011'), new Date('2012'), new Date('2013'), new Date('2014')],
                    ['Primera matrícula', value.tasas_2011.tasas1, value.tasas_2012.tasas1, value.tasas_2013.tasas1, value.tasas_2014.tasas1],
                    ['Segunda matrícula', value.tasas_2011.tasas2, value.tasas_2012.tasas2, value.tasas_2013.tasas2, value.tasas_2014.tasas2],
                    ['Tercera matrícula', value.tasas_2011.tasas3, value.tasas_2012.tasas3, value.tasas_2013.tasas3, value.tasas_2014.tasas3],
                    ['Cuarta matrícula', value.tasas_2011.tasas4, value.tasas_2012.tasas4, value.tasas_2013.tasas4, value.tasas_2014.tasas4],
                    ['Media nacional' + averageErrorFlag, average['tasas_2011'].toFixed(2), average['tasas_2012'].toFixed(2), average['tasas_2013'].toFixed(2), average['tasas_2014'].toFixed(2)]
                ]
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: "%Y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
                    }
                }
            }
        });

在data中，包括x轴的格式和值（在此图中，您有四个变量和x值）。您也可以使用axis键格式化x轴。

如何从api链接创建C3图表？

1 个答案: