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

2023-12-15

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

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

到我的选项部分,这将在结果工具提示中的数据值后面显示单词 test。然而,我的工具提示实际上保持完全不变。和想法?

Thanks!


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

enter image description here

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
                    }
                } ]
            }
        }
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chart.js 工具提示模板不起作用 的相关文章

随机推荐

  • 使用最简单的方法将数据(字符串)从子 VC 传递到父 VC

    使用最简单的方法将数据 字符串 从子视图控制器传递到父 VC 我尝试了几种方法 但迷失了 有人可以告诉我最好的方法吗 斯里坎特是正确的 如果您有从一个视图控制器 我们的 第一个 视图控制器 到另一个视图控制器 我们的 第二个 视图控制器 的
  • 单击坐标而不识别元素

    作为我的 Selenium 登录功能测试的一部分 我想通过识别按钮的坐标并指示 Selenium 单击这些坐标来单击按钮 这可以在不识别元素本身的情况下完成 通过 id xpath 等 我知道还有其他更有效的方法来运行单击命令 但我希望专门
  • 即使浏览器关闭,CodeIgniter 如何保留会话数据?

    我想知道 CodeIgniter 中的会话是如何工作的 当浏览器关闭时 会话不是应该自动终止吗 默认情况下 CodeIgniter 不会在浏览器关闭时销毁会话 config sess expire on close FALSE 相反 我们可
  • Chart.js 工具提示模板不起作用

    因此 我正在 Chart js 中使用条形图 并且尝试让自定义工具提示正常工作 环顾四周 似乎在这种情况下要做的事情是添加 tooltipTemplate test 到我的选项部分 这将在结果工具提示中的数据值后面显示单词 test 然而