如何使用Highcharts实现顶部带系列标签、垂直Y轴的倒置链接图表？

这两个需求Highcharts原生就支持，根本不用写自定义扩展，配置逻辑拆解开给你列清楚：

一、把系列标签放到图表顶部 #

别用默认的底部图例，直接把标签钉在每个系列图形的最顶端就行，两步就搞定：

• 先把默认图例关了：配置legend.enabled = false，省得侧边/底部的图例占多余空间
• 给每个系列开顶端定位的数据标签，核心参数别记错：
  • dataLabels.enabled = true：先把标签开关打开
  • dataLabels.align = 'center'：标签跟柱子/点居中对齐
  • dataLabels.verticalAlign = 'bottom'：标签飘在图形上面，不会挡着柱子本体
  • 别忘了加dataLabels.crop = false、dataLabels.overflow = 'allow'，不然靠近图表边缘的标签会被硬裁掉

二、让Y轴垂直排布标签 #

你说的垂直绘制Y轴，本质是把Y轴上横放的刻度标签转成竖的，顺着Y轴方向排，省横向空间：

• 不用挪Y轴的默认位置（就在绘图区左边就行），把刻度标签旋转270度：配置yAxis.labels.rotation = 270
• 转完之后标签可能错位，微调下yAxis.labels.x、yAxis.labels.y的值，把标签跟Y轴的间距、垂直对齐位置调顺就行

可直接参考的配置片段 #

把这段丢到你的Highcharts初始化配置里，直接跑就能看到效果，不用自己一点点凑参数：

Highcharts.chart('container', {
  chart: {
    type: 'column' // 跟参考示例的柱状图形态对齐
  },
  legend: {
    enabled: false // 关闭默认图例
  },
  yAxis: {
    title: {
      text: '数值指标'
    },
    labels: {
      rotation: 270, // 刻度标签竖排
      x: -12, // 跟Y轴留够间距
      y: 20 // 跟刻度线对齐
    }
  },
  series: [{
    name: '示例系列',
    data: [120, 200, 150, 80, 70, 110, 130],
    dataLabels: {
      enabled: true,
      align: 'center',
      verticalAlign: 'bottom', // 标签放图形顶端
      crop: false,
      overflow: 'allow'
    }
  }]
})

适配提醒 #

• 多系列并列柱状图的话，每根柱子顶会自动显示对应系列名，跟参考示例的视觉效果完全一致
• 要是想用折线图，直接把chart.type改成'line'就行，数据标签的配置不用动，照样能把标签钉在折线上面

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