HighCharts 轴在导出时翻转

Question

我的 Web 应用程序中有一个 Highchart。在浏览器中正常显示如下：

但是当我导出图表时它翻转了轴，我最终得到了下图：

以下是我用于 Highchart 的选项。

var options = ({
        chart: {
            renderTo: 'chartDiv'
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            tickInterval:  7200 * 10000,
            allowDecimals:false,
            labels: {
                format: '{value}',                   
                rotation: 30,
                align: 'left',                  
            },

            title: {
                text: 'Date'
            }
        },
        yAxis: [{
            title: {
                text: 'No. of rings'
            },
            min: 0
        },

        { // Secondary yAxis
            gridLineWidth: 0,
            min: 0,
            title: {
                text: 'Accumulative Rings',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} Ring',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true,
        }

        ],
        tooltip: {
            shared: true
        },
        legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
        plotOptions: {
            spline: {
                marker: {
                    enabled: false
                },

            }               
        }
    });

我的图表中有三个系列，条形图可以有 0 个值。数据来自 ajax 服务，我将其放入一个数组中，然后按如下方式添加到图表中：

chart.addSeries({
    type: 'bar',
    name: 'Rings per day ',
    data: barData,
    pointInterval: mainInterval
});
chart.addSeries({

    type: 'spline',
    name: 'Accumilative rings ',
    data: spline1Data,
    yAxis: 1,
});
chart.addSeries({
    type: 'spline',
    name: 'Planned Progress ',
    data: spline2Data,
    yAxis: 1,
    color: "#FF0000"
});

我的图表出了什么问题？

Answer 1

bar系列是关键部分。 bar 系列强制图表呈现翻转。在您的情况下使用 column。它在您的浏览器上显示不同，因为很可能您使用的是旧版本的 Highcharts。

HighCharts 轴在导出时翻转

HighCharts axis flip on export

javascript

jquery

charts

highcharts