首页 文章

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

提问于
浏览 次
0

在HighCharts 5.0，您可以定义一组在不同的取景框大小应用响应chartOptions的 . 见https://www.highcharts.com/docs/chart-concepts/responsive .

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

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

Expected

当图表宽度<= 500px时，缩短xAxis标签（例如'January'变为'J'） . 当图表调整回大于500px时，标签应恢复为“1月” .

Actual

当图表<= 500像素，“一月”变为“J”，但是当浏览器的尺寸调整回以上500像素，图表继续永远显示的短名称，而不管浏览器的大小的 .

Example Two http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/responsive/

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

Expected

当图表的宽度为<= 500像素，在Y轴 Headers 应被删除 . 当图表的宽度是> 500像素，在Y轴 Headers 应该说“金额” .

Actual

当图表的宽度为<= 500像素，在Y轴 Headers 被删除，但当图表被调整回以上500像素时，“金额” Headers 不会重新出现，它应 .

Summary

有可能的解决办法，但他们不解决这个问题 .

在第二个例子中，Y轴 Headers 可以使用HighChart的样式化模式和CSS媒体查询或类名进行切换（在这里看到的className例如：https://www.highcharts.com/docs/chart-concepts/responsive）

然而，这仅仅修复可以与CSS（例如隐藏的元件）来解决的问题 . 这不是一个现实的解决方案，以截断x轴的名字，45deg旋转标签等 .

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

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

highcharts responsive

1 回答

  • 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声明：

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

    Working example ：http://jsfiddle.net/ewolden/25z2a1c9/

    API on responsive.rules ：https://api.highcharts.com/highcharts/responsive

    回复于

相关问题