HighCharts:如何在浏览器调整大小时切换yAxis选项?

在HighCharts 5.0中,您可以定义一组适用于不同视口大小的响应图表选项。看见 https://www.highcharts.com/docs/chart-concepts/responsive .

不幸的是,对xAxis和yAxis的更改只在一个方向上起作用。再次调整浏览器大小时,无法恢复到原始选项。

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/responsive/axis/

chartOptions: {
  xAxis: {
      labels: {
          formatter: function () {
              return this.value.charAt(0);
          }
      }
  }
}

当图表宽度为<=500px,X轴标签缩短(例如,“一月”变为“J”)。 当图表重新调整为>500px,标签应恢复为“一月”

真实的

当图表为<=500px,“一月”变为“J”,但当浏览器重新调整到500px以上时,无论浏览器大小如何,图表始终显示短名称。

示例二 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/responsive/

chartOptions: {
    yAxis: {
        title: {
            text: null
        }
    }
}

当图表宽度为<=500px,应删除yAxis标题。当图表宽度>;500px,yAxis标题应该是“金额”

真实的

当图表宽度为<=500px时,yAxis标题被删除,但当图表重新调整到500px以上时,“金额”标题不会重新显示。

总结

有一些潜在的解决办法,但它们没有解决这个问题。

在第二个示例中,可以使用HighChart的样式化模式和CSS媒体查询或类名来切换yAxis标题(参见此处的类名示例: https://www.highcharts.com/docs/chart-concepts/responsive )

然而,这只能解决CSS可以解决的问题(例如隐藏元素)。这不是截断X轴名称、将标签旋转45度等的实际解决方案。

我是错过了什么还是这只是一个bug?非常感谢。