解决方法
今天我有同样的问题,通过添加onAnimationComplte和tooltipevents的选项来解决它很容易。
onAnitmationComplete调用方法来显示工具提示,就像hover事件一样。
通常,您可以在tooltipevents中定义事件来显示工具提示,但是我们需要删除它们并传递一个空数组。
注:(http://www.chartjs.org/docs/#doughnut-pie-chart)。
使用Javascript:
var options = { tooltipTemplate: "<%= value %>",onAnimationComplete: function() { this.showTooltip(this.segments,true); //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].bars,true); //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].points,true); },tooltipEvents: [],showTooltips: true } var context = $('#chart').get(0).getContext('2d'); var chart = new Chart(context).Pie(data,options);
HTML:
<div id="chartContainer"> <canvas id="chart" width="200" height="200"></canvas> </div>
示例数据:
var data = [ { value: 300,color:"#F7464A",highlight: "#FF5A5E" },{ value: 50,color: "#46BFBD",highlight: "#5AD3D1" },{ value: 100,color: "#FDB45C",highlight: "#FFC870" } ]
JSFiddle PIE:
http://jsfiddle.net/5gyfykka/
JSFiddle BAR / LINE:
http://jsfiddle.net/5gyfykka/14/