Bubble Chart悬浮提示优化需求及Series标题修改问题咨询

1. 移除/修改悬浮提示顶部的“Series 1”文本 #

针对主流图表库，实现方式如下：

• Chart.js：通过配置 tooltip 的 callbacks.title 函数，自定义顶部文本或返回空值移除默认标题：

  options: {
    tooltip: {
      callbacks: {
        title: function() {
          return ''; // 移除顶部文本
          // 如需自定义标题：return '自定义提示标题';
        }
      }
    }
  }
  

• Highcharts：修改 tooltip.headerFormat 替换或隐藏默认系列名称：

  tooltip: {
    headerFormat: '' // 移除顶部文本
    // 如需自定义：headerFormat: '<span style="font-size:10px">自定义标题</span><br/>'
  }
  

2. 限制悬浮提示数值数量并添加“查看更多”选项 #

以主流库为例，实现逻辑如下：

• Chart.js：在 tooltip.callbacks.label 中处理数据，控制显示条数并追加“查看更多”：

  options: {
    tooltip: {
      callbacks: {
        label: function(context) {
          const maxShowCount = 3; // 设置最多显示3条数值
          const labels = [];
          const dataList = context.dataset.data;
          
          // 截取前N条数据展示
          for(let i=0; i<Math.min(maxShowCount, dataList.length); i++){
            labels.push(`数值${i+1}: ${dataList[i].y}`);
          }
          // 数据超出限制时添加“查看更多”
          if(dataList.length > maxShowCount){
            labels.push('查看更多');
          }
          return labels;
        }
      }
    }
  }
  

  若需点击“查看更多”展开全部数据，可结合自定义tooltip的DOM点击事件实现。
• Highcharts：利用 tooltip.formatter 函数遍历数据，控制显示条数：

  tooltip: {
    formatter: function() {
      const maxShowCount = 3;
      let content = '';
      const data = this.point.series.data;
      
      // 展示前N条数据
      for(let i=0; i<Math.min(maxShowCount, data.length); i++){
        content += `<span>数值${i+1}: ${data[i].y}</span><br/>`;
      }
      // 数据超出限制时添加“查看更多”
      if(data.length > maxShowCount){
        content += `<span style="color:#007bff;cursor:pointer">查看更多</span>`;
      }
      return content;
    }
  }
  

  点击展开功能可通过监听tooltip DOM元素的点击事件，动态修改提示内容实现。

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