Question

在HighCharts 5.0中，您可以定义一组应用于不同视口大小的响应式chartOptions。请参阅https://www.highcharts.com/docs/chart-concepts/responsive。

不幸的是，对xAxis和yAx的更改只能在一个方向上进行。当浏览器第二次调整大小时，无法恢复原始选项。

示例一 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时，缩短xAxis标签（例如'1月'变为'J'）。将图表调整为＆gt; 500px，标签应该恢复到'1月'。

实际

当图表为＆lt; = 500px时，'January'变为'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媒体查询或className切换yAxis标题（请参阅此处的className示例：https://www.highcharts.com/docs/chart-concepts/responsive）

然而，这仅解决了可以用CSS解决的问题（例如隐藏元素）。这不是截断xAxis名称，旋转标签45deg等

的现实解决方案

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

我错过了什么或者这只是一个错误吗？谢谢！

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

如果你想要进一步的步骤，你也可以拥有它，因为responsive.rules上的API声明：

响应式设置的一组规则。规则从上到下执行。

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

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

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

1 个答案: