如何在Chart.js中顯示工具提示？

繼教程之後，此代碼繪製折線圖，但沒有提示。我在這裏錯過了一些配置選項嗎？在教程中出現了工具提示。如何在Chart.js中顯示工具提示？

var chartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 

var ctx = document.getElementById("chart").getContext("2d"); 
var myNewChart = new Chart(ctx).Line(chartData, { 
    showTooltip: true, 
    tooltipTemplate: "<%= value %>" 
});

來源

2014-07-02 Blacksonic

您正在使用什麼版本chart.js之嗎？

我可以證實，tooltips work using v1.0.1-beta2

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>

但不工作using v0.2.0。

版本1.0.1-beta2可從cdnjs獲取。

來源

2014-08-08 16:40:40 cooncesean

證實，v0.2.0是目前可用的版本上的NuGet（26/09/14 ），典型的... –

是的，我抓住它與涼亭。我的代碼在從CDN加載Chart.js後工作 –

我通過Nuget得到它，並有同樣的問題。我必須從https://github.com/nnnick/Chart.js獲取最新版本。 –

它的工作原理和正確顯示工具提示..你在控制檯中得到任何錯誤？

以下是我用你的代碼：

var chartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 

window.onload = function(){ 
    var ctx = document.getElementById("chart").getContext("2d"); 
    window.myNewChart = new Chart(ctx).Line(chartData, { 
     showTooltip: true, 
     tooltipTemplate: "<%= value %>" 
    }); 
};

來源

2014-07-17 15:06:35 Manolis

你只需要把用的backgroundColor一個值，而不是一個數組：

datasets: [{ 
    label: "# of beauty womens", 
    data: [12, 5, 3], 
    backgroundColor: "#FC940B", 
    fill: false, 
    borderColor: "#FC940B" 
}]

擁抱...

來源

2017-06-18 12:21:43

雖然這段代碼可能回答這個問題，提供關於如何解決問題和/或爲什麼解決問題的附加背景可以提高答案的長期價值。請閱讀此[如何回答]（http://stackoverflow.com/help/how-to-answer）以提供高質量的答案。 – thewaywewere

如何在Chart.js中顯示工具提示？

回答

相關問題