Angular6/7下Highcharts BarChart轴极值部分图例与水平虚线实现

前置依赖适配 #

• 注意Angular 6/7不支持太高版本的Highcharts，用highcharts@^7.2.1、highcharts-angular@^2.4.0的兼容版本即可，别直接装最新版，不然会报依赖不匹配的错误
• 初始化图表时先把紧凑展示的基础参数调好：压缩图表内边距，比如配置chart.margin: [8, 8, 24, 28]，设置chart.height为120-160px区间，适配多图同屏时的小尺寸占位

核心需求1：X/Y轴仅展示min、medium、max三类标识 #

这部分根本不用自己写自定义渲染逻辑，Highcharts原生配置就能搞定：

• 关闭轴的自动随机刻度生成，手动固定三个刻度的位置。给xAxis和yAxis配置tickPositions数组，三个数组元素依次对应轴的最小值（min）、中间值（medium）、最大值（max），完全替换默认的自动刻度
• 精简轴的冗余样式：把轴刻度的字号调到10px，隐藏多余的刻度线占位，保证小尺寸下三个标识的显示清晰、不挤空间
  对应配置代码参考：

chartOptions = {
  chart: {
    type: 'bar',
    margin: [8, 8, 24, 28],
    height: 140,
    animation: false
  },
  xAxis: {
    min: 0,
    max: 100, // 替换为实际业务的X轴最大值
    tickPositions: [0, 50, 100], // 对应min/medium/max
    labels: {
      style: { fontSize: '10px' }
    },
    tickWidth: 1,
    lineWidth: 1
  },
  yAxis: {
    min: 0,
    max: 200, // 替换为实际业务的Y轴最大值
    tickPositions: [0, 100, 200], // 对应min/medium/max
    labels: {
      style: { fontSize: '10px' }
    }
  },
  // 关闭多余冗余组件
  legend: { enabled: false },
  credits: { enabled: false },
  tooltip: { enabled: false },
  plotOptions: {
    bar: {
      pointWidth: 8,
      borderWidth: 0
    }
  },
  series: [{ data: [35, 80, 120, 180] }]
}

核心需求2：Y轴medium位置绘制水平虚线 #

这部分也不用自己操作Canvas手绘，Highcharts自带的参考线配置直接就能出效果，渲染性能比手动绘好很多，适配多图同屏的场景：

• 在yAxis节点下新增plotLines配置数组，条目参数和medium值严格对齐：
  • value：填入前面配置的Y轴medium对应的数值，保证参考线和medium刻度完全水平对齐
  • dashStyle：设置为Dash，直接生成虚线样式
  • 线宽设为1px，颜色用浅灰色（#cccccc），避免和柱体视觉冲突
  • 关闭参考线自带的标签、交互事件，减少冗余占位
    对应补充到上面yAxis配置的代码：

yAxis: {
  // ...前面的基础轴配置
  plotLines: [
    {
      value: 100, // 严格对应Y轴的medium刻度值
      color: '#cccccc',
      dashStyle: 'Dash',
      width: 1,
      label: { enabled: false }
    }
  ]
}

多图同屏的性能优化注意点 #

• 把图表的动画效果全关掉，小尺寸图不需要动画，多图一起加载的时候也不会卡
• 柱体圆角设为0，去掉多余的边框、阴影效果，进一步压缩渲染开销
• 所有轴的标签做截断处理，避免长文本把小尺寸图表撑变形

内容的提问来源于stack exchange，提问作者user1981152