当使用Chart.js库时,我可以在我的页面上添加多个甜甜圈,而不会有问题。
http://www.chartjs.org/docs/#doughnut-pie-chart
但是我找不到一种总是显示工具提示的方法 – 不仅将鼠标悬停在圆环上。有人知道这是否可行?
解决方法
今天我有同样的问题,通过添加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/