带有数组对象的 c3 图表答案

【问题标题】：c3 chart with array object带有数组对象的 c3 图表
【发布时间】：2018-05-05 05:13:02
【问题描述】：

我正在尝试使用 C3 创建一个饼图。我有一个对象数组，如下所示：

myData= [ { a: 1 }, { b: 14 }, {c: 21 }, { d: 16 }]

a,b,c,d 是标签，数字应该是我图表的值。

var chart = c3.generate({
                data: {
                    columns: [
                       myData
                     ],
                    type: 'donut'

                },
                donut: {
                    title:  "I am a chart"
                }

            });

这种方法行不通，因为 C3 不接受数据类型...

【问题讨论】：

你读过documentation吗？关于如何绘制饼图有一个example。 columns 必须是一个数组数组，其中每个子数组包含绘制系列所需的所有数据。

标签： javascript d3.js c3.js

【解决方案1】：

通过example on the c3js.org 站点，看起来您应该传入一个数组数组，而不是一个对象数组。

【讨论】：

噢！ @Andreas 的忍者

【解决方案2】：

试试这个：- 如果数据格式如下：-

  var  myData = [{
                "a": "Canada",
                "b": "1317",
                "c": "890"
            },
            {
                 "a": "California",
                "b": "131",
                 "c": "8900"
            },
            {
                  "a": "Califo",
                   "b": "4131",
                    "c": "1890"
            }
    ];

var measdata = myData.map(o => {
          return  [o['a'], o['b']] ;
        });
        console.log('values of data::::' + JSON.stringify(measdata));

        var chart = c3.generate({
                        data: {
                            columns: measdata,  
                            type: 'donut'

                        },
                        donut: {
                            title:  "I am a chart"
                        }

                    })

小提琴链接：- http://jsfiddle.net/g00mvspu/

或者，另一种解决方案；-

var mydata =  [
            {name: 'www.site1.com', upload: 200, download: 200, total: 400, x: 2}
        ];

var chart = c3.generate({
    data: {
        json:mydata,
    //  //  [
  //  //        {name: 'www.site1.com', upload: 200, download: 200, total: 400, x: 2}
   //  //   ],
        type : 'donut',
        keys: {
            x: 'name',
            value: ['upload', 'download'],
        }
    },
});

小提琴链接：http://jsfiddle.net/9ozed5nx/

【讨论】：

如果可行，请接受它作为答案或提出您面临的任何问题。