Highcharts 未在次轴上正确绘制系列

Question

您好，我正在使用 Highcharts 库创建一个带有累积绘图线的条形图，如下面的 jsFiddle 所示。

我希望累积序列如下图中的红线所示（累积值绘制在最右侧的轴上）：

如您所见，次要 Y 轴已翻转并显示系列索引值而不是实际累积值。

这是当前代码：

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: [{
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null,
            }
        },
        {
        opposite:true,
            title: {
                text: "Cumulative"
            }
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2008',
        data: [973, 914, 4054, 732, 34]
    }, {
        name: 'Cumulative',
        xAxis:1,
        type:"spline",
        data: [34, 732, 914, 1973, 4054]
    }
    ]
});

如何更正此问题才能按预期绘制系列？

谢谢！

Answer 1

您可以做的是在加载后根据创建时添加的 2 个系列的总和添加一个新系列：

    events: {
        load: function () {
            var s1900 = this.series[0].data;
            var s2008 = this.series[1].data;
            var newData = [];
            if (s1900.length == s2008.length) {
                for (var i = 0; i < s1900.length; i++) {
                    newData.push(s1900[i].y + s2008[i].y);
                }
            }
            this.addSeries({
                name: 'Cumulative',
                xAxis: 0,
                type: "spline",
                data: newData
            });
        }
    }

我不确定为什么你想要这个在相反的 xAxis 上，或者为什么你提供的链接图像中的曲线不是真正的累积，除非那不是你真正想要的。现场直播 demo.

请注意，您将不得不处理以下情况：并非所有点都有值，或者如果一个类别不在两个系列中，等等等等。

修改后的答案。假设您希望在备用 xAxis 上具有相同的类别并且不想共享相同的 yAxis，您可以这样做：

...
        xAxis: [{
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        }, {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            opposite: true,
            title: {
                text: null
            }
        }],
        yAxis: [{
            min: 0,
            endOnTick: false,
            title: {
                text: 'Population (millions)',
                align: 'high'
            }
        }, {
            min: 0,
            opposite: true,
            reversed: true,
            endOnTick: true,
            title: {
                text: 'Cumulative Population (millions)',
                align: 'high'
            }
        }],
...

这会设置它以便您具有相同的 xAxis 类别（其他方法可以做到这一点）。查看新 demo。

Highcharts 未在次轴上正确绘制系列

Highcharts not plotting series correctly on secondary axis

javascript

charts

highcharts