如何添加圖像到chart.js工具提示？

Question

我使用Chart.js通過設計器的特定方向來構建折線圖，並且我希望我的工具提示包含一個小圖標。

是否有可能？

Answer 1

您可以覆蓋customTooltips函數。

var myLineChart = new Chart(ctx).Line(data, { 
    customTooltips: function (tooltip) { 
     var tooltipEl = $('#chartjs-tooltip'); 

     if (!tooltip) { 
      tooltipEl.css({ 
       opacity: 0 
      }); 
      return; 
     } 

     tooltipEl.removeClass('above below'); 
     tooltipEl.addClass(tooltip.yAlign); 

     // split out the label and value and make your own tooltip here 
     var parts = tooltip.text.split(":"); 
     var innerHtml = '<img src="pathTomyImage/myImage.png"> <span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>'; 
     tooltipEl.html(innerHtml); 

     tooltipEl.css({ 
      opacity: 1, 
      left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
      top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', 
      fontFamily: tooltip.fontFamily, 
      fontSize: tooltip.fontSize, 
      fontStyle: tooltip.fontStyle, 
     }); 
    } 
}); 

更換pathTomyImage/myImage.png與圖像URL（你也可以從查找使用部分[0]選擇這 - 這是x軸的標籤，或更容易還是給你的圖片取決於一個名字。軸標籤如January.png，February.png）

請務必添加以下標記以及

<div id="chartjs-tooltip"></div> 

小提琴 - http://jsfiddle.net/02xrgy10/