zones

在highcharts中，用于数据列分区的主要 api 属性为 zones
官网api释义 ：

An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.
定义系列中区域的数组。 根据zoneAxis选项，可以将区域应用于X轴，Y轴或Z轴以获得气泡。 区域定义必须按照值的升序排列。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

备注: 设置图形的默认颜色可以在 series 中设置 color，也可以在 zones 中设置一组 {color: 'red'}此时不用设置 value,如果两者同时设置了，则 zones 中的颜色会覆盖掉 series 中的color

由于各种类型图的 zones 都差不多，这里只以 column 和 line 进行示例
示例代码 : https://jshare.com.cn/columns/VFdvLu

一： column 类型

需求 : 将 column 中月收益小于0的柱子显示为 绿色，大于 0 显示为 红色


series: [{
  data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
  color: 'red', // 默认颜色
  zones: [{
    // 小于0显示 'green',大于0的则使用默认颜色 'red'
    value: 0,
    color: 'green',
    dashStyle: 'dot'
  }]
}]

效果图 :
highcharts之数据列分区 随笔 第1张

二：line 类型

需求 : 将数值小于0显示为绿色，0 - 10 显示为蓝色，大于10显示为红色


series: [{
  data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
  color: 'green', // 默认颜色
  zones: [{
    value: 0,
    color: 'green',
    dashStyle: 'dot'
  }, {
    value: 10,
    color: 'blue'
  }, {
    color: 'red' // 这里设置的颜色会覆盖掉 series 中设置的颜色 'green',最终大于0部分显示为 'red'
  }]
}]

效果图 :
highcharts之数据列分区 随笔 第2张

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄