响应式

优质

小牛编辑

138浏览

2023-12-01

一、整个图表响应式

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

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

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

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

在线试一试

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

二、图表组件粒度响应式

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

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

responsive: {
  rules: [{              // 在图表小于 500px 的情况下关闭图例
    condition: {         // 响应条件
      maxWidth: 500
    },
    chartOptions: {      // 响应内容
      legend: {
        enabled: false
      }
    }
  }]
}

1. 响应条件

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

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

2. 响应内容

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

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

3. 多个响应规则

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

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