jquery - Chart.js - donut 总是显示工具提示？

Question

使用 Chart.js 库时，我可以毫无问题地在页面上添加多个 donut 。

http://www.chartjs.org/docs/#doughnut-pie-chart

但我找不到一种方法来始终显示工具提示 - 不仅仅是将鼠标悬停在 donut 上时。有人知道这是否可能吗？

Answer 1

我今天遇到了同样的问题，通过添加 onAnimationComplte 和 tooltipevents 选项很容易解决它。

onAnitmationComplete 调用该方法来像悬停事件一样显示工具提示。通常，您在 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 条形图/线条图: http://jsfiddle.net/5gyfykka/14/