在jQuery Tooltip中渲染带动态ID的Highcharts图表问题

我明白你现在的需求：当hover某个元素时，在tooltip里渲染对应专属数据的Highcharts图表，还要根据hover元素的ID生成带前缀的容器。咱们一步步来搞定这个问题：

核心思路 #

• 从触发hover的元素上获取ID，用来匹配专属数据
• 动态生成带chart_前缀的容器，避免ID冲突
• 在Tooltip的open回调里创建容器、加载对应数据并渲染图表

完整实现代码 #

HTML结构 #

先调整下HTML结构，不用在title里硬写容器，动态生成更灵活：

<p>
  <label for="age">Your age:</label>
  <input id="age" class="chart-tooltip-trigger" title="Age Chart" />
</p>
<p>
  <label for="income">Your income:</label>
  <input id="income" class="chart-tooltip-trigger" title="Income Chart" />
</p>
<p>Hover the fields to see the tooltip.</p>

JavaScript代码 #

$(function() {
  // 预定义各元素ID对应的专属数据，你可以根据实际需求扩展
  const chartDataMap = {
    age: [10, 20, 30, 40, 50],
    income: [50000, 60000, 80000, 100000, 120000]
  };

  $(".chart-tooltip-trigger").tooltip({
    // 允许tooltip里渲染HTML内容
    html: true,
    // 动态生成tooltip的内容，返回带前缀的图表容器
    content: function() {
      const elementId = $(this).attr("id");
      return `<div id="chart_${elementId}" style="width: 500px; height: 300px;"></div>`;
    },
    open: function(event, ui) {
      const $trigger = $(event.target);
      const elementId = $trigger.attr("id");
      // 生成带前缀的容器ID
      const chartContainerId = `chart_${elementId}`;
      // 获取当前元素对应的专属数据
      const targetData = chartDataMap[elementId];

      // 渲染Highcharts图表
      Highcharts.chart(chartContainerId, {
        chart: {
          type: 'bar'
        },
        title: {
          text: $trigger.attr("title")
        },
        series: [{
          name: '专属数据',
          data: targetData
        }]
      });
    }
  });
});

关键细节解释 #

• 获取触发元素ID：在content和open回调里，通过$(this)或者event.target拿到当前hover的元素，再用.attr("id")提取ID
• 带前缀的容器：用模板字符串chart_${elementId}生成唯一的容器ID，彻底避免多个tooltip的容器ID冲突
• 专属数据匹配：用对象chartDataMap把元素ID和对应的数据数组关联起来，后续新增元素只需要在这个对象里加数据就行
• HTML支持：必须设置html: true，否则tooltip里的容器元素不会被正确解析渲染
• 动态内容生成：用content回调动态生成容器，比在title里硬写HTML更灵活、更易维护

这样调整后，当你hover不同的input元素时，tooltip里会自动渲染对应数据的Highcharts图表，容器ID也会自动带上chart_前缀，完全满足你的需求。

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