C3 Charts柱状图实时数据更新时Tooltip不刷新问题求助

阿华AIGC实验室

2026-5-20

解决C3 Charts柱状图Tooltip与数据不同步的问题

我之前在做实时数据交互的项目时，也碰到过C3 Charts里柱状条更新后Tooltip没同步的坑，给你几个亲测有效的解决思路：

1. 自定义Tooltip内容，动态获取最新数据

默认的Tooltip可能会缓存旧数据，我们可以自定义contents函数，每次hover时直接从当前数据点拉取最新值，彻底避免缓存问题：

var chart = c3.generate({
  // 基础配置（数据、柱子样式等）
  data: {
    json: yourInitialData,
    type: 'bar'
  },
  tooltip: {
    contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
      // 生成Tooltip标题
      var title = defaultTitleFormat(d[0].x);
      var tooltipHtml = '<table class="c3-tooltip"><thead><tr><th colspan="2">' + title + '</th></tr></thead><tbody>';
      
      // 遍历当前hover的所有数据点（单柱子就是一个），取最新值
      d.forEach(function(item) {
        tooltipHtml += `
          <tr class="c3-tooltip-name-${item.id}">
            <td class="name"><span style="background-color:${color(item.id)}"></span>${item.name}</td>
            <td class="value">${defaultValueFormat(item.value)}</td>
          </tr>
        `;
      });
      
      tooltipHtml += '</tbody></table>';
      return tooltipHtml;
    }
  }
});

这个方法的核心是：每次Tooltip渲染时，都直接使用传入的d参数（这是C3实时返回的当前hover数据点，已经是更新后的数据），完全不依赖任何缓存。

2. 数据更新后手动重置Tooltip事件

如果自定义内容还是没解决问题，大概率是Tooltip的事件绑定没有随数据更新。你可以在reload方法的回调里，手动触发Tooltip的事件重绑定：

// 你的观察者触发的reload方法示例
function handleDataUpdate(newData) {
  chart.load({
    json: newData, // 这里替换成你的数据格式
    done: function() {
      // 数据加载完成后，先隐藏当前Tooltip
      chart.tooltip.hide();
      // 调用C3内部方法，重新绑定Tooltip的hover事件
      chart.internal.bindTooltipEvents();
    }
  });
}

chart.internal.bindTooltipEvents()会重新给所有柱状条绑定hover事件，确保下次hover时，Tooltip能拉取到最新的数据。