图表JS在工具提示中显示HTML

Question

我一直在与图表JS的文档争执，试图找出如何修改线形图工具提示的内容，当您将鼠标悬停在特定点上时。

基本上，我想在所有相同的垂直轴上显示值，只要单个点悬停。我已经试过这样的事情：

tooltips: { 
    callbacks: { 
     label: function(tooltipItem, data){ 
      console.log(data); 
      var html = ""; 
      for(var dataset in data.datasets){ 
       html += "<label>" + data.datasets[dataset].label + ": " + data.datasets[dataset].data[tooltipItem.index] + "%</label><br/>"; 
      } 
      return html; 
     } 
    }, 
}, 

本工程以遍历每个数据集以及每个数据集的附加<label>Example: 0%<br/></label>的程度，但是当我返回HTML，工具提示逐字显示字符串：

<label>Example1: 1%</label><br/><label>Example2: 5%</label><br/> ... 

不用翻译正确的HTML：

Example1: 1% 
Example2: 5% 
... 

现在，我知道，表JS 1.0版有tooltipTemplate选项，但我可以不发eem找出是否有任何方法可以在tooltips.callbacks.label选项中返回HTML。有关于如何做自定义工具提示的文档，如果我无法弄清楚，我将最终使用这些提示，但任何帮助将不胜感激。

Answer 1

从v2.4开始，不幸的是，回调函数当前不支持HTML。你需要编写一个自定义的工具提示功能。

可以在chart-js的样本文件夹中找到示例（尽管有些比我找到的其他样本更好）。

https://github.com/chartjs/Chart.js/tree/v2.4.0/samples/tooltips

尝试运行的样本获取的选项和修改如何影响提示功能的感觉。

例如，在自定义函数的线图示例：

Chart.defaults.global.pointHitDetectionRadius = 1; 
var customTooltips = function(tooltip) { 
    // Tooltip Element 
    var tooltipEl = document.getElementById('chartjs-tooltip'); 
    if (!tooltipEl) { 
     tooltipEl = document.createElement('div'); 
     tooltipEl.id = 'chartjs-tooltip'; 
     tooltipEl.innerHTML = "<table></table>" 
     document.body.appendChild(tooltipEl); 
    } 
    // Hide if no tooltip 
    if (tooltip.opacity === 0) { 
     tooltipEl.style.opacity = 0; 
     return; 
    } 
    // Set caret Position 
    tooltipEl.classList.remove('above', 'below', 'no-transform'); 
    if (tooltip.yAlign) { 
     tooltipEl.classList.add(tooltip.yAlign); 
    } else { 
     tooltipEl.classList.add('no-transform'); 
    } 
    function getBody(bodyItem) { 
     return bodyItem.lines; 
    } 
    // Set Text 
    if (tooltip.body) { 
     var titleLines = tooltip.title || []; 
     var bodyLines = tooltip.body.map(getBody); 
     //PUT CUSTOM HTML TOOLTIP CONTENT HERE (innerHTML) 
     var innerHtml = '<thead>'; 
     titleLines.forEach(function(title) { 
      innerHtml += '<tr><th>' + title + '</th></tr>'; 
     }); 
     innerHtml += '</thead><tbody>'; 
     bodyLines.forEach(function(body, i) { 
      var colors = tooltip.labelColors[i]; 
      var style = 'background:' + colors.backgroundColor; 
      style += '; border-color:' + colors.borderColor; 
      style += '; border-width: 2px'; 
      var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>'; 
      innerHtml += '<tr><td>' + span + body + '</td></tr>'; 
     }); 
     innerHtml += '</tbody>'; 
     var tableRoot = tooltipEl.querySelector('table'); 
     tableRoot.innerHTML = innerHtml; 
    } 
    var position = this._chart.canvas.getBoundingClientRect(); 
    // Display, position, and set styles for font 
    tooltipEl.style.opacity = 1; 
    tooltipEl.style.left = position.left + tooltip.caretX + 'px'; 
    tooltipEl.style.top = position.top + tooltip.caretY + 'px'; 
    tooltipEl.style.fontFamily = tooltip._fontFamily; 
    tooltipEl.style.fontSize = tooltip.fontSize; 
    tooltipEl.style.fontStyle = tooltip._fontStyle; 
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; 
}; 

然后设置此作为图表的选项定制工具提示功能：

window.myLine = new Chart(chartEl, { 
    type: 'line', 
    data: lineChartData, 
    options: { 
     title:{ 
      display:true, 
      text:'Chart.js Line Chart - Custom Tooltips' 
     }, 
     tooltips: { 
      enabled: false, 
      mode: 'index', 
      position: 'nearest', 
      //Set the name of the custom function here 
      custom: customTooltips 
     } 
    } 
}); 

编辑：抱歉，我只读你的问题的标题，而不是完整的问题。通过将选项中的交互模式更改为索引，您可以在工具提示中更简单地完成所需的操作（除非另有原因需要）。有一个示例可以显示这是如何工作的。