一、整个图表响应式

默认情况下，Highcharts 图表都是支持整个图表跟随图表容器响应式的，无需额外配置，只需要保证容器的宽度自适应即可，下面是最简单的容器样式设置

  1. <!-- 通过设置 minwidth 保证 div 容器自适应，那么 Highcharts 图表就会跟随容器自适应 -->
  2. <div style="height:400px;min-width:300px" id="container"></div>

另外还可以手动的调用自适应函数 chart.reflow() 来响应页面变化

  1. chart.reflow();   // 手动调用自适应函数

在线试一试

但这种自适应自适整个图表粒度的自适应，无法达到图表各个组件的自适应要求。

二、图表组件粒度响应式

Highcharts 5.0 推出了全新的自适应功能，可以配置 responsive.rules 可以根据条件来设置不同的图表响应配置。

responsive.rules 共有两个大的属性：condition 和 chartOptions

  1. responsive: {
  2.   rules: [{              // 在图表小于 500px 的情况下关闭图例
  3.     condition: {         // 响应条件
  4.       maxWidth: 500
  5.     },
  6.     chartOptions: {      // 响应内容
  7.       legend: {
  8.         enabled: false
  9.       }
  10.     }
  11.   }]
  12. }

1. 响应条件

condition 指响应的条件，包含高宽度的最值及回调函数，下面是详细说明

  • maxHeight：最大高度
  • maxWidth：最大宽度
  • minHeight：最小高度
  • minWidth：最小宽度
  • callback：回调函数，其中包含 this 变量代表着当前图表对象，回调函数返回 true 则表示本规则生效。这个属性相对高宽度限定更加灵活，另外可以对整个页面宽度改变进行响应

    2. 响应内容

chartOptions 是响应内容。它可以配置完整的图表配置，也就是支持全部的组件响应式。

另外在 CSS 样式分离模式下，我们最常用的是根据响应改变 chart.className 来应用不同的 CSS 样式。

3. 多个响应规则

responsive.rules 是一个数组配置，所有如果需要配置多个响应规则，写多个数组元素即可。

一般情况下，响应式功能可以根据图表的大小来调整不同组件的放置位置、组件之间的间隔等，具体的使用实例有：切换图例显示、改变坐标轴间距 等

原文: https://www.hcharts.cn/docs/basic-responsive