如何关闭特定图表系列Tooltip并自定义坐标轴Tooltip格式？

1. 关闭特定系列Tooltip，保留坐标轴提示 #

直接在目标系列的配置中单独禁用tooltip，不会影响坐标轴十字准线（crosshair）及相关提示：

series: [
  {
    name: 'AAPL', // K线系列
    type: 'candlestick',
    tooltip: { enabled: false }, // 禁用该系列的tooltip
    // 其他原有配置...
  },
  {
    name: 'Volume', // 成交量系列
    type: 'column',
    tooltip: { enabled: false }, // 禁用该系列的tooltip
    // 其他原有配置...
  },
  // 其他需要保留tooltip的系列...
]

你之前尝试的全局tooltip formatter写法有误，Highcharts的tooltip formatter函数参数并非tooltip，而是包含当前点信息的上下文对象。不过针对单系列禁用需求，直接在series内配置更简单直观。

2. 自定义坐标轴十字准线的提示格式 #

坐标轴的提示属于十字准线（crosshair）的标签，需要在xAxis和yAxis的配置中分别设置crosshair.label的格式化规则：

xAxis: {
  type: 'datetime',
  crosshair: {
    enabled: true,
    label: {
      enabled: true,
      formatter: function() {
        // 自定义x轴日期格式，示例为"YYYY-MM-DD HH:mm"
        return Highcharts.dateFormat('%Y-%m-%d %H:%M', this.value);
      }
    }
  },
  // 其他原有配置...
},
yAxis: [{
  // 第一个y轴（K线对应轴）
  crosshair: {
    enabled: true,
    label: {
      enabled: true,
      formatter: function() {
        // 自定义数值格式，保留两位小数
        return this.value.toFixed(2);
      }
    }
  },
  // 其他原有配置...
}, {
  // 第二个y轴（成交量对应轴）
  crosshair: {
    enabled: true,
    label: {
      enabled: true,
      formatter: function() {
        // 成交量数值格式化，添加千分位分隔符
        return Highcharts.numberFormat(this.value, 0, ',');
      }
    }
  },
  // 其他原有配置...
}]

整合后的核心配置示例 #

将上述配置嵌入你的代码中，即可实现需求效果：

Highcharts.stockChart('container', {
  tooltip: {
    split: true // 可选，拆分tooltip布局，更清晰展示多轴信息
  },
  xAxis: {
    type: 'datetime',
    crosshair: {
      enabled: true,
      label: {
        enabled: true,
        formatter: function() {
          return Highcharts.dateFormat('%Y-%m-%d %H:%M', this.value);
        }
      }
    }
  },
  yAxis: [{
    title: { text: 'AAPL' },
    crosshair: {
      enabled: true,
      label: {
        enabled: true,
        formatter: function() {
          return this.value.toFixed(2);
        }
      }
    }
  }, {
    title: { text: 'Volume' },
    opposite: true,
    crosshair: {
      enabled: true,
      label: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.value, 0, ',');
        }
      }
    }
  }],
  series: [{
    name: 'AAPL',
    type: 'candlestick',
    tooltip: { enabled: false },
    data: [...] // 你的K线数据
  }, {
    name: 'Volume',
    type: 'column',
    yAxis: 1,
    tooltip: { enabled: false },
    data: [...] // 你的成交量数据
  }]
});

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