jquery – Chart.js – 甜甜圈总是显示工具提示?

前端之家收集整理的这篇文章主要介绍了jquery – Chart.js – 甜甜圈总是显示工具提示?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当使用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/

猜你在找的jQuery相关文章