简体   繁体   English

Chart.js tooltipTemplate不起作用

[英]Chart.js tooltipTemplate not working

So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. 所以我正在使用Chart.js中的条形图,我正在尝试使用自定义工具提示。 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. 到我的选项部分,这将在结果工具提示中显示我的数据值之后的单词test。 However, my tooltip remains completely unchanged in reality. 但是,我的工具提示在现实中完全没有变化。 And ideas? 和想法?

Thanks! 谢谢!

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM