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

预期

当图表宽度 500px 时，标签应恢复为“一月”。

实际

当图表

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

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

预期

当图表宽度 500px 时，yAxis 标题应显示“数量”。

实际

当图表宽度

总结

有一些潜在的解决方法，但它们不能解决问题。

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

但是，这只修复了可以通过 CSS 解决的问题（例如隐藏元素）。这不是截断 xAxis 名称、将标签旋转 45 度等的现实解决方案。

另一种选择是使用 $(window).resize() 内部的 HighCharts update() 函数，但图表已经在监听这个事件，所以我不想添加额外的监听器。

我错过了什么还是这只是一个错误？谢谢！

Answer 1

您可以制定一套响应式规则。与上面的示例保持一致：图表宽度小于 500 像素时匹配，大于 500 像素时匹配。像这样：

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
  }]
}

如果您想要进一步的步骤，您也可以这样做，因为 responsive.rules 上的 API 指出：

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

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

responsive.rules 上的 API：https://api.highcharts.com/highcharts/responsive