使用c3js为相同的json数据创建组合图表(线和条)

时间:2015-12-16 04:52:45

标签: javascript c3.js

我想为相同的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
        }
    }
});

此输出仅为条形图,折线图未加载。

2 个答案:

答案 0 :(得分:0)

试试这段代码

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

示例您将所有日期,Dept和SMV数据分隔为单独的数组。这里的方法如下:数据应包含一个包含多个数组的数组。第一个参数被定义为数据集的关键字。示例数据集看起来像这样:

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

答案 1 :(得分:0)

尝试下面的简单代码,您可以使用一个简单的JSON文件,如下所示。

Thread Group A
    Loop Controller [Count = same count as was used for Thread Group1]
        all samplers of Thread Group1
    Loop Controller [Count = same count as was used for Thread Group2]
        all samplers of Thread Group2
Thread Group B
    Loop Controller [Count = same count as was used for Thread Group3]
        all samplers of Thread Group3
    Loop Controller [Count = same count as was used for Thread Group4]
        all samplers of Thread Group4

有关详情,请尝试http://c3js.org/samples/chart_combination.html