爲工具提示方塊設置自定義顏色Chart.js

Question

使用Chart.js時，是否可以更改用於重新呈現每個工具欄的工具提示中的正方形顏色？

我注意到，當您更改pointColor值時，它會影響正方形的顏色，但是您可以以某種方式使用除pointColor的設置之外的其他顏色，以使每個正方形設置爲其他顏色。

查看下面的小提琴示例，將鼠標懸停在其中一個小節上，並且工具提示中的正方形想要更改爲純紅色，並且顏色像條形的懸停狀態一樣爲純灰色。

的jsfiddle：

https://jsfiddle.net/dyjr2812/

HTML：

<canvas id="bar" width="390" height="225"></canvas> 

的JavaScript：

//Bar chart with two bars 
    var barData2 = { 
     labels: ["John W", "Ben T", "Jenny H", "Samantha D", "Anothony P"], 
     datasets: [ 
      { 
       fillColor: "rgba(153, 153, 155, 0.4)", 
       highlightFill: "#7C7C7C", 
       strokeColor: "#7C7C7C", 
       pointColor: "#7C7C7C", 
       pointStrokeColor: "#7C7C7C", 
       pointHighlightFill: "#fff", 
       data: [25, 94, 68, 175, 66] 
      }, 
      { 
       fillColor: "rgba(236,166,166,0.4)", 
       highlightFill: "#C3090A", 
       strokeColor: "#f9090a", 
       pointColor: "#fff", 
       pointStrokeColor: "#C3090A", 
       pointHighlightFill: "#f9090a", 
       data: [134, 112, 92, 160, 52] 
      } 
     ] 
    }; 
    options = { 
     responsive: true, 
     scaleFontSize: 11, 
     bezierCurve: true 
    }; 
    var ctx = $("#bar").get(0).getContext("2d"); 
    var myChart = new Chart(ctx).Bar(barData2, options); 

Answer 1

你可以用Chart.MultiTooltip把你的顏色和呼叫的實際提示畫。

var originalDraw = Chart.MultiTooltip.prototype.draw; 
Chart.MultiTooltip.prototype.draw = function() { 
    this.legendColors[0].fill = "green"; 
    this.legendColors[1].fill = "blue" 
    originalDraw.call(this, arguments) 
} 

小提琴 - https://jsfiddle.net/fxts741r/