javascript - 如何使用 Chart.js 编辑折线图中的自定义工具提示？

Question

这是我的代码

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{{ $nDate }}],
            datasets: [{
                label: 'All Users',
                data: [ {{ $nUser }} ],
                backgroundColor: ['rgba(54, 162, 235, 0.2)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 3,
                lineTension: 0,
                labelFontSize : '16',
            }]
        },
 options: {
    tooltips: {
        mode: 'index',
        intersect: false,
        position: 'nearest'
    },
    responsive: false,
    legend: { display: false },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                type: 'category',
                labelOffset: 10,
                stepSize:250,
                callback: function(value, index) {
                if (value !== 0) return value;
                }
            },
            gridLines:{
                drawBorder:false
            }
        }],
        xAxes: [{
            gridLines: {
                display: false,
            },
        }],
    },
    plugins:{
        datalabels:{
            display:false
        }
    }
}
});

我的输出

我的预期输出

如何在折线图中放置/编辑自定义工具提示？我只想获得第二张图片中的确切工具提示，但我不知道如何解决它？另一件事是我的 $nDate 我只想显示四个日期，例如 8,15,22,29 但是当我尝试创建一个具有此值的新数组标签时 ["", ""]; 我的图表崩溃了。

Answer 1

您可以使用自定义回调函数来使用您自己选择的 html 标签和颜色进行渲染，请按照官方文档链接获取进一步指导。

http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips

选项:{
工具提示:{
启用:假，
自定义:函数(tooltipModel){}
}
}