如何使用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

options: { tooltips: { enabled: false, custom: function(tooltipModel) {} } }