Highcharts:带叠加线图(次轴)的叠加条形图百分比

时间:2014-08-01 04:31:56

标签: highcharts

我试图创建双轴高图。在一个轴上我想要百分比堆积条形图,而在另一个轴上我想要一个折线图。虽然我已经关闭了(我的正常'正常&叠加的条形图由折线图覆盖),但我似乎无法将条形图以百分比形式堆叠,即使在指定之后堆叠为'百分比'。

以下是我所拥有的:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            width: 550,
            height: 400
        },
        title: {
            text: 'Title'
        },
        xAxis: {
            categories: [1, 2, 3]
        },
        yAxis: [{
                min: 0,
                title: {
                    text: 'Percentage'
                }
            }, {
                min: 0,
                opposite: true,
                title: {
                    text: 'Total Count',
                style: {
                    color: Highcharts.getOptions().colors[4]
                }
            },
            labels: {
                style: {
                    color: Highcharts.getOptions().colors[4]
                }
            },
        }],
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'percentage'
            }
        },
        series: [{
            name: 'A',
            type: 'column',
            yAxis: 0,
            data: [5, 1, 2]

        }, {
            name: 'B',
            type: 'column',
            yAxis: 0, 
            data: [1, 1, 2]

        }, {
            name: 'C',
            type: 'column',
            yAxis: 0, 
            data: [2, 3, 1]

        }, {
            name: 'D',
            type: 'column',
            yAxis: 0, 
            data: [4, 3, 3]

        }, {
            name: 'Total Count',
            type: 'line',
            yAxis: 1, // Secondary axis (a total of all in the primary axis)
            data: [12, 8, 8]

        }]
    });
});

JSFiddle:jsfiddle.net/natecarrier/5mX7s/

1 个答案:

答案 0 :(得分:1)

  1. 您需要用百分比替换百分比。
  2. alignTicks设置为false,将停用aligning ticks
  3. 示例:

    http://jsfiddle.net/5mX7s/5/