Chart.js tooltipTemplate不起作用 [英] Chart.js tooltipTemplate not working

问题描述

所以我正在使用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" 

到我的选项部分，这将在我的数据值之后显示单词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
                    }
                } ]
            }
        }
    });

这篇关于Chart.js tooltipTemplate不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！