Chart.js 工具提示模板不起作用

2022-01-22 00:00:00 tooltip javascript chart.js

所以我正在使用 Chart.js 中的条形图，并且正在尝试使自定义工具提示正常工作.环顾四周，似乎在这种情况下要做的事情就是添加

So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add 

tooltipTemplate: "<%= value %>% test"

到我的选项部分，这将在结果工具提示中我的数据值之后显示单词测试.但是，我的工具提示在现实中保持完全不变.和想法?

to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains completely unchanged in reality. And ideas?

谢谢！

推荐答案

以下是自定义工具提示标签的示例:

Here is an example of custom tooltip label:

var ctx = document.getElementById("myChart");

var barChartData = {
        labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
        datasets : [ {
            type : 'bar',
            label : "Revenue (US$)",
            data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
            backgroundColor : 'rgba(0, 0, 255, 0.3)'
        } ]
    };

var myChart = new Chart(ctx,
    {
        type : 'bar',
        data : barChartData,
        options : {
            responsive : true,
            tooltips : {

                callbacks : { // HERE YOU CUSTOMIZE THE LABELS
                    title : function() {
                        return '***** My custom label title *****';
                    },
                    beforeLabel : function(tooltipItem, data) {
                        return 'Month ' + ': ' + tooltipItem.xLabel;
                    },
                    label : function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
                    },
                    afterLabel : function(tooltipItem, data) {
                        return '***** Test *****';
                    },
                }

            },
            scales : {
                xAxes : [ {
                    display : true,
                    labels : {
                        show : true,
                    }
                } ],
                yAxes : [ {
                    type : "linear",
                    display : true,
                    position : "left",
                    labels : { show : true },
                    ticks : {
                        beginAtZero : true
                    }
                } ]
            }
        }
    });

相关文章