2014-07-02 52 views
6

继教程之后,此代码绘制折线图,​​但没有提示。我在这里错过了一些配置选项吗?在教程中出现了工具提示。如何在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 %>" 
}); 

回答

11

您正在使用什么版本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获取。

+0

证实,v0.2.0是目前可用的版本上的NuGet(26/09/14 ),典型的... –

+0

是的,我抓住它与凉亭。我的代码在从CDN加载Chart.js后工作 –

+0

我通过Nuget得到它,并有同样的问题。我必须从https://github.com/nnnick/Chart.js获取最新版本。 –

1

它的工作原理和正确显示工具提示..你在控制台中得到任何错误?

以下是我用你的代码:

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 %>" 
    }); 
}; 
0

你只需要把用的backgroundColor一个值,而不是一个数组:

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

拥抱...

+0

虽然这段代码可能回答这个问题,提供关于如何解决问题和/或为什么解决问题的附加背景可以提高答案的长期价值。请阅读此[如何回答](http://stackoverflow.com/help/how-to-answer)以提供高质量的答案。 – thewaywewere