如何在chart.js图表中添加工具提示

Question

我正在开发一个Web应用程序，最近将Google Charts替换为Chart.js，因为Chart.js在视觉上更具吸引力。但是，我失去了一种功能，就是无法再获取数据点上方的工具提示。我想知道是否有人知道如何实现这个功能，因为我对JavaScript是一个新手。下面是图形和设置的代码：

    var data = {
            labels : graphData[0],
            datasets : [
                {
                    fillColor : "rgba(200,160,100,0.5)",
                    strokeColor : "rgba(80,240,70,1)",
                    pointColor : "rgba(80,240,70,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[3]
                },
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[1]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[2]
                }
            ]
        };

        var options = {
            scaleShowGridLines : true,
            scaleShowLabels : true,
            animationSteps : 150,
            scaleOverride: true,
            scaleSteps : Math.max.apply(Math, graphData[3]),
            scaleStepWidth : 1,
            scaleStartValue : 1
        };

        var ctx = document.getElementById("chart_div").getContext("2d");
        ctx.canvas.width  = Math.max(graphData[0].length * 60, 600);
        var myNewChart = new Chart(ctx).Line(data,options);
        $('#chart_area').fadeIn();
        $('html, body').animate({
             scrollTop: $("#picture_area").offset().top
         }, 1000);

- Eric

---

你有没有想到如何实现工具提示？ - tviana

获取最新的Chart.js库，它应该具有内置的工具提示，然后在选项{showTooltips:true}中添加它以激活，并参考文档进行修改。 - whale_steward

Answer 1

var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true,
        showTooltips: true,
        multiTooltipTemplate: "<%= value %>",
    });

使用此代码在Chart.js中设置全局设置。

- Arun Yokesh