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没有在辅助轴上正确绘制系列

1 个答案: