Chart.js - 甜甜圈显示工具提示总是？ [英] Chart.js - Doughnut show tooltips always?

问题描述

使用Chart.js库时，我可以在我的网页上添加多个甜甜圈。

When using the Chart.js library, I can add multiple doughnuts on my page without a problem.

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

但我找不到可以始终显示 工具提示的方法 - 不仅是将鼠标悬停在圆环上。有没有人知道这是否可能？

But I cannot find a way to always show the tooltips - not only when hovering the mouse over the doughnut. Does anybody know if this is possible?

推荐答案

我今天有同样的问题，通过添加选项onAnimationComplte工具管。

I had the same problem today and solved it quite easy by adding the options onAnimationComplte and tooltipevents.

onAnitmationComplete调用方法来显示工具提示，就像悬停事件一样。
通常你在tooltipevents中定义事件来显示工具提示，但我们需要删除它们并传递一个空数组。

onAnitmationComplete calls the method to show the tooltips like a hover event does. Normally you define the events in tooltipevents to display the tooltips but we need to remove them and pass an empty array.

注意：（ http://www.chartjs.org/docs/#doughnut-pie-chart ）。

Javascript：

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 PIE: http://jsfiddle.net/5gyfykka/

JSFiddle BAR / LINE：
http：// jsfiddle。 net / 5gyfykka / 14 /

JSFiddle BAR/LINE: http://jsfiddle.net/5gyfykka/14/

这篇关于Chart.js - 甜甜圈显示工具提示总是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！