导出时更新的yAxis标题丢失

On Export The Updated yAxis Title Is Lost

本文关键字:标题 yAxis 更新      更新时间:2023-09-26

我们的图表包含多个系列。我们一次只允许在图表中显示一个系列。当图表第一次加载时,我们将yAxis的标题设置为series[0].name:

chart {
...
events: {
    load: function () {
        this.options.yAxis[0].title.text = this.series[0].name;
        this.yAxis[0].setTitle({ text: this.series[0].name });
        this.yAxis[0].update({
            title: {
                text: this.series[0].name
            }
        });
    }
}
...
}

在图例项目上点击我们做:

events: {
    legendItemClick: function (event) {
        var seriesIndex = this.index;
        var serie = this.chart.series;
        for (i = 0; i < serie.length; i++) {
            if (serie[i].index == seriesIndex) {
                serie[i].show();
                this.chart.options.yAxis[0].title.text = serie[i].name;
                this.chart.yAxis[0].setTitle({ text: serie[i].name });
            } else {
                serie[i].hide();
            }
        }
        return false;
    }
}

当用户单击图例中的每个系列时,数据集将更新,yAxis.title.text将更改为反映活动系列的series.name

但是,当我们导出图表时,无论哪个系列处于活动状态,yAxis.title.text始终是最初加载的值。

如何使图表导出具有yAxis的正确标题?我以为设置chart.options可以做到这一点。

代表jsFiddle。

您可以使用循环查找可见的序列,然后更新轴标题,而不是静态设置第一个序列标题。作为出口的结果,你将实现你的目标。

load: function () {
                var series = this.series,
                    yAxis = this.yAxis[0];
                $.each(series,function(i, serie) {
                    if(serie.visible) {
                        yAxis.setTitle({
                            text: serie.name
                        });
                    }
                });
 }

示例:http://jsfiddle.net/e9o7ek2a/3/