Highcharts - 堆叠整个系列(条形图)

时间:2015-02-17 09:53:52

标签: javascript charts highcharts

所以我有两个关于事件数据的系列:

  • 一个有意见的系列
  • 具有€值的系列

每个系列中的1个项目与1个事件相关

我想要一个带有2列的堆积条形图:'视图','价值'

每个活动都有自己的颜色。

这是我到目前为止所做的:

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Views', 'Value']
    },
    yAxis: [{
        min: 0,
        title: {
            text: 'Value (€)'
        }
    },{
        min: 0,
        opposite: true,
        title: {
            text: 'Views'
        }
    }],
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Views',
        data: [{
            name: 'Event1',
            y: 500
        },{
            name: 'Event2',
            y: 200
        },{
            name: 'Event3',
            y: 350
        }],
        yAxis: 1
    }, {
        name: 'Value',
        data: [{
            name: 'Event1',
            y: 3000
        },{
            name: 'Event2',
            y: 2000
        },{
            name: 'Event3',
            y: 1500
        }]
    }]
});

我已经为价值和观点设置了2个yAxis。

我的问题是:

数据按事件堆叠,而不是按类别堆叠。正如您将看到的那样,它甚至不是一个好的堆叠,因为第一个栏是隐藏第二个。

是否可以使用Highcharts进行此操作?

修改

initial JSFIDDLE

更接近我正在寻找的东西:

New Fiddle

但我无法找到正确设置第二个yAxis的方法

1 个答案:

答案 0 :(得分:1)

如果要显示每个类别的yAxis,则需要将所有数据拆分为单独的点。您可以使用linkedTo选项连接系列(在图例中)。这将需要单独设置每个系列颜色(以获得匹配的颜色),请参阅演示:http://jsfiddle.net/fxadv20h/4/

代码:

    series: [{
        id: 'e3',
        name: 'Event 3',
        data: [{
            name: 'Views',
            y: 500
        }],
        yAxis: 1
    },{
        id: 'e2',
        name: 'Event 2',
        data: [{
            name: 'Views',
            y: 200
        }],
        yAxis: 1
    },{
        id: 'e1',
        name: 'Event 1',
        data: [{
            name: 'Views',
            y: 150
        }],
        yAxis: 1
    }, {
        linkedTo: 'e3',
        name: 'Event 3',
        data: [{
            x: 1,
            name: 'Value',
            y: 1000
        }]
    },{
        linkedTo: 'e2',
        name: 'Event 2',
        data: [{
            x: 1,
            name: 'Value',
            y: 2000
        }]
    },{
        linkedTo: 'e1',
        name: 'Event 1',
        data: [{
            x: 1,
            name: 'Value',
            y: 1500
        }]
    }]