如何在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中显示工具提示？

回答

相关问题