如何修改Highcharts提示框中系列名称的字体样式？

你遇到的问题是：Highcharts提示框中系列名称"Return of:"的字体大小无法通过tooltip.style.fontSize修改，该设置仅影响轴数据字体，需要让系列名称字体和数据字体保持一致。

解决方案原理 #

Highcharts提示框的系列名称默认由headerFormat控制渲染，这部分内容不会自动继承tooltip.style的样式，因此需要手动配置headerFormat的样式，或者将系列名称整合到pointFormat中。

修改后的代码示例 #

以下是两种可行的修改方式：

方式一：自定义headerFormat并设置样式

直接在headerFormat中给系列名称指定字体大小，与tooltip.style.fontSize保持一致：

var xData = [];
var yData = [];
for (var i = 0; i < 1000; i++) {
  xData.push(Math.round((Math.random() - 0.5) * 100));
  yData.push(Math.round((Math.random() - 0.5) * 100));
}

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    height: 500,
    width: 500
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Asset Return Pairs',
    fontSize: '30px'
  },
  xAxis: {
    title: {
      text: 'Asset 1'
    },
    max: 50,
    tickInterval: 5,
    labels: {
      format: '{value}%'
    }
  },
  yAxis: {
    title: {
      text: 'Asset 2'
    },
    min: -50,
    max: 50,
    tickInterval: 5,
    labels: {
      format: '{value}%'
    }
  },
  tooltip: {
    // 自定义头部格式，设置系列名称字体大小
    headerFormat: '<span style="font-size: 13.5px">{series.name}</span><br/>',
    pointFormat: 'Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
    style: {fontSize: 13.5}
  },
  series: [{
    name: 'Return of:',
    data: xData.map(function(xVal, index) {
      return [xVal, yData[index]];
    })
  }]
});

方式二：将系列名称整合到pointFormat中

清空默认的headerFormat，把系列名称直接写入pointFormat，这样会自动继承tooltip.style的字体设置：

// ... 其他代码保持不变
tooltip: {
  headerFormat: '', // 禁用默认头部
  pointFormat: '<span>{series.name}</span><br/>Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
  style: {fontSize: 13.5}
},
// ... 其他代码保持不变

说明 #

两种方式都能实现系列名称与数据字体大小一致的效果，可根据需求选择。第一种方式保留了提示框的头部结构，第二种方式更简洁，直接合并内容。

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