使用 c3js 为相同的 json 数据创建组合图（线和条）答案

【问题标题】：Creating a Combination chart(line and bar) for same json data using c3js使用 c3js 为相同的 json 数据创建组合图（线和条）
【发布时间】：2015-12-16 04:52:44
【问题描述】：

我想为相同的 json 数据创建一个组合图表（折线和条形图），以便线条接触所有条形图，因为数据点是相同的。

这里是代码

var graphdata=[
{ 'indicator': 'X', 'total': 100 },
            { 'indicator': 'Y', 'total': 200 },
            { 'indicator': 'Z', 'total': 300 }
];
var g1=[
{ 'indicator': 'X', 'total': 150 },
            { 'indicator': 'Y', 'total': 220 },
            { 'indicator': 'Z', 'total': 330 }
];
setTimeout(function () {
    chart.load({
          data: {
        type: 'line',
        json: g1,
        keys: {
            x: 'indicator',
            value: ['total']
        },

    },
    axis: {
            x: {
                type: 'category'
            }
    },
    });
}, 1000);
var chart = c3.generate({
    data: {
        type: 'bar',
        json: graphdata,
        keys: {
            x: 'indicator',
            value: ['total']
        },

    },
    axis: {
            x: {
                type: 'category'
            }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

这个输出只是条形图，没有加载折线图。

【问题讨论】：

控制台有错误吗？
我没有收到任何错误

标签： javascript c3.js

【解决方案1】：

试试这个代码

var data = [
{ 'date': '2015-01-01', 'Dept': null, 'SMV': 3},
{ 'date': '2015-01-02', 'Dept': 1, 'SMV': 4}
];

示例您将所有日期、部门和 SMV 数据分隔到单独的数组中。此处的方法如下：数据应包含一个数组，其中包含多个数组。第一个参数被定义为数据集的键。示例数据集如下所示：

var data = [
['date', '2015-01-01', 2015-01-02'],
['Dept', null, 1],
['SMV', 3, 4]
];

【讨论】：

【解决方案2】：

试试下面的简单代码，你可以使用如下所示的简单 JSON 文件。

var graphdata={data1:[100,200,300],data2:[150,220,330]};
var chart = c3.generate({
    data: {
        types: {data1:'spline',
            data2:'bar'
        },
        json: graphdata,
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

更多详情可以试试http://c3js.org/samples/chart_combination.html。

【讨论】：