ツールチップの正方形にカスタムカラーを設定するChart.js

debugcn 投稿 Dev

ui-matt

Chart.jsを使用する場合、各バーを表すために使用されるツールチップ内の正方形の色を変更することは可能ですか？

pointColor値を変更すると正方形の色に影響することに気づきましたが、設定されpointColorているもの以外の別の色を使用すると、各正方形を別の色に設定できます。

以下のフィドルの例を見てください。バーの1つにカーソルを合わせると、ツールチップの四角が、バーのホバー状態のように赤一色と灰色一色に変更されます。

JSFiddle：

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

ポタトピーリング

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/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]