Chart.js: 更改工具提示模板

Question

我需要更改 Chart.js 工具提示模板，以便只有值部分以粗体显示。有 tooltipTemplate 选项，它应该正是这样做的。此选项的默认值为：

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"

我试过这样编辑它：

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%"

但它在屏幕上显示 strong 标签作为文本的一部分，而不是呈现粗体文本。我尝试将它们移动到 <% 和 %>，但它仍然不起作用。有什么想法吗？

Answer 1

模板无法识别 HTML。您必须使用 customTooltips 选项。以下是改编自 https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html

的示例（但未优化）

HTML

<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

CSS

#chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

JS

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

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 = '<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,
        });
    }
});

Fiddle - http://jsfiddle.net/6rxdo0c0/1/

Answer 2

我有一个最新的答案，使用 jquery 和 bootstrap 4 个动态创建工具提示 div 的工具提示。假设您的 html 是

<canvas id="myPieChart" width="100" height="55"></canvas>

然后使用这个脚本：

<script>  
    $(document).ready(function() {   

        let canvas = $("#donutChart")[0];
        let ctx = canvas.getContext("2d");

        let donutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: {

                tooltips: {

                    callbacks: {
                        title: function(){
                            return null;
                        },
                        label: function(tooltipItem, data) {
                            var multiline = ['First Line', 'second line'];
                            return multiline;
                        },

                    },
                    enabled: false, // the builtin tooltips cannot extend beyond the canvas

                    custom: function(tooltip) {

                        var tooltipEl = $('#chartjs-tooltip');

                        if(tooltipEl.length == 0) { // if not exists, create it
                            tooltipEl = $('<div class="tooltip fade" id="chartjs-tooltip"></div>').appendTo('body');
                        }

                        if ( !tooltip.body ) { // Hide if no tooltip
                            tooltipEl.remove();
                            return;
                        }


                        tooltipEl.removeClass('bs-tooltip-top bs-tooltip-bottom');
                        tooltipEl.addClass( 'bs-tooltip-' + (tooltip.yAlign == "bottom" ? "top" : "bottom") ); // different naming in bootstrap

                        var innerHtml = '<div class="arrow" style="left: '+tooltip.caretX+'px;"></div>'
                            + '<div class="tooltip-inner" style="max-width: none;">' + tooltip.body[0].join('<br>')
                            + '</div>';
                        tooltipEl.html( innerHtml );
                        tooltipEl.css( {
                            opacity: 1,
                            left: $("#donutChart").offset().left + tooltip.x + 'px',
                            top: $("#donutChart").offset().top + tooltip.y + 'px'
                        } );

                    },
                },
                hover: { 
                    mode: null,
                },
            }
        });
    });
</script>

Chart.js: 更改工具提示模板

Chart.js: changing tooltip template

javascript

chart.js