求助：如何在Highcharts的数据值中添加百分号

嗨，我来帮你搞定在Highcharts里给数据值加上百分号的需求～

要实现这个效果，主要可以从Y轴刻度、提示框（Tooltip）、数据标签这几个场景入手，结合你的现有代码，我整理了几种常用的实现方式，修改后的代码示例如下：

1. 给Y轴刻度添加百分号 #

在配置里新增yAxis项，通过formatter函数把数值转换成带百分号的格式：

Highcharts.chart('container', {
  chart: { type: 'line' },
  title: { text: '' },
  subtitle: { text: '' },
  xAxis: {
    categories: [
      '13/02/2018', '14/02/2018', '15/02/2018', '16/02/2018',
      '17/02/2018', '18/02/2018', '19/02/2018', '20/02/2018',
      '21/02/2018', '22/02/2018', '23/02/2018', '24/02/2018',
      '25/02/2018', '26/02/2018', '27/02/2018', '28/02/2018'
    ],
    labels: {
      rotation: -45,
      style: { fontSize: '12px', fontFamily: 'Verdana, sans-serif' }
    }
  },
  // Y轴刻度显示百分号
  yAxis: {
    labels: {
      formatter: function() {
        return this.value + '%'; // 给每个Y轴刻度值拼接百分号
      }
    }
  },
  // 2. 鼠标hover时的提示框显示百分号
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
             this.x + ': ' + this.y + '%';
    }
  },
  // 3. 给数据点直接显示带百分号的标签（可选，需要开启）
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true, // 开启数据标签
        formatter: function() {
          return this.y + '%';
        }
      }
    }
  },
  // 示例数据系列（根据你的实际数据替换即可）
  series: [{
    name: '指标数据',
    data: [8, 15, 12, 20, 25, 18, 14, 22, 28, 24, 19, 16, 11, 17, 23, 26]
  }]
});

关键配置说明： #

• yAxis.labels.formatter：专门处理Y轴刻度文字，把原始数值和%拼接后返回
• tooltip.formatter：自定义鼠标悬浮时的提示内容，确保显示的数值带百分号
• plotOptions.line.dataLabels.formatter：如果需要在图表的每个数据点上直接显示带百分号的数值，就开启这个配置，记得把enabled设为true

你可以根据自己的实际需求选择其中一种或几种组合使用，比如只需要提示框和Y轴显示百分号，就去掉数据标签的配置即可。

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