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

Question

在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);
          }
      }
  }
}

预期的

当图表宽度为

真实的

当图表

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

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

预期

当图表宽度为

真实的

当图表宽度为

总结

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

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

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

另一个选项是在$（窗口）内使用HighCharts update（）函数。resize（），但图表已经在侦听此事件，因此我不想添加其他侦听器。

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

Answer 1

您可以创建一组响应式规则。与上面的示例保持一致：当图表宽度小于500px时匹配一个，当图表宽度大于500px时匹配一个。像这样：

responsive: {
  rules: [{
    condition: {
      maxWidth = 500, //matches all configs with width below 500px
    },
    chartOptions: {} //options go here
  }, {
    condition: {
      minWidth = 500, //matches all configs with width above 500px
    },
    chartOptions: {} //options go here
  }]
}

如果您想要进一步的步骤，您也可以这样做，因为API是响应式的。规则规定：

用于响应设置的一组规则。规则是自上而下执行的。

工作示例：http://jsfiddle.net/ewolden/25z2a1c9/

API on responsive。规则：https://api.highcharts.com/highcharts/responsive