javascript - Highcharts 未在辅助轴上正确绘制系列

Question

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

CHART DEMO

我希望将累积序列表示为下图中的红线(累积值绘制在最右侧的轴上):

SAMPLE OF DESIRED OUTPUT

如您所见，辅助 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 .

请注意，您将必须处理并非所有点都有值或一个类别不在两个系列中的情况，等等。

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

...
        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 .