为工具提示方块 Chart.js 设置自定义颜色答案

【问题标题】：Set custom colours for tooltip squares Chart.js为工具提示方块 Chart.js 设置自定义颜色
【发布时间】：2015-08-20 05:40:27
【问题描述】：

使用 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);

【问题讨论】：

标签： jquery charts html5-canvas bar-chart chart.js

【解决方案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/

【讨论】：

完美。谢谢！