Question

使用Chart.js时，是否可以更改用于重新显示每个条形的工具提示中的方块颜色？

我注意到当你更改pointColor值会影响正方形的颜色但是你可以某种方式使用不同的颜色，而不是为pointColor设置的颜色会让你拥有每个正方形设置为另一种颜色。

请看下面的小提琴示例将鼠标悬停在其中一个条形图上，工具提示中的方块希望更改为纯红色和纯灰色，就像条形图的悬停状态一样。

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

Answer 1

你可以将Chart.MultiTooltip包装成你的颜色并调用实际的工具提示。

$insert->bind_param('sssssss',
                                     $value['id'], 
                                     $depot_details_id, 
                                     $value['drop'], 
                                     $value['rate'],
                                     $currency,
                                    STR_TO_DATE($est_date , '%d-%m-%Y'), 
                                     $location);        

but this return error "undefined function STR_TO_DATE"

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

为工具提示正方形Chart.js设置自定义颜色

1 个答案: