调整Chart.js呈现的留置权图表中工具提示的外观

Question

是否可以调整使用Chart.js 2.4.0渲染的折线图中显示的工具提示？

它最近显示x和y值以及数据集的名称。我只需要数据集的名称。

Answer 1

您可以在选项中更改工具提示的配置。在工具提示中，我们有回调对象。其中，您将标题设置为自定义函数，该函数返回您要提供给工具提示的标题 [<强>采样代码

var chartInstanceHoverModeNearest = new Chart(ctx, {
            type: 'bar',
            data: data,
            options:{
                events:["click"],
                title : {
                    display : true
                },
                scales: {
                    xAxes: [{
                        categorySpacing: 0
                    }]
                },
                tooltips: {
                    enabled: true,
                    callbacks : {
                        title : function(){
                            return "Your Custom Title";
                        },
                        label : function(){
                            return "";
                        }   
                    }
                }
            }
        });

以下是回调对象中的方法。如果您想扩展更多，可以覆盖这些方法以提供自定义功能

callbacks : {
    afterBody:(),
    afterFooter:(),
    afterLabel:(),
    afterTitle:(),
    beforeBody:(),
    beforeFooter:(),
    beforeLabel:(),
    beforeTitle:(),
    footer:(),
    label:(tooltipItem, data),
    labelColor:(tooltipItem, chartInstance),
    title:(tooltipItems, data)
}