如何將工具提示添加到chart.js圖

Question

我正在研究一個web應用程序，最近我使用chart.js替換了google圖表，因爲它在視覺上更具吸引力。但是，我採取的一個損失是我無法再獲取數據點上方的工具提示。我想知道是否有人知道如何做到這一點，因爲我是一個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); 

Answer 1

沒有與提示 一起可用chartjs版本，你可以得到它在這個GitHub的頁面 https://github.com/Regaddi/Chart.js/tree/tooltips

看起來像上面的鏈接不再可

但是在Github上

其可用 here

你可以看到文檔here

Answer 2

您只需複製https://github.com/nnnick/Chart.js/blob/master/Chart.min.js中的Chart.min.js即可。

Answer 3

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

用這個來設置chartjs中的gloabl設置。