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

问题描述

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

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

但我找不到总是显示工具提示的方法——不仅是在将鼠标悬停在甜甜圈上时.有人知道这是否可能吗?

解决方案

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

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

注意:(http://www.chartjs.org/docs/#doughnut-饼图).

Javascript:

var 选项 ={tooltipTemplate: "<%= value %>",onAnimationComplete:函数(){this.showTooltip(this.segments, true);//在条形图中显示工具提示(问题:多个数据集不起作用 http://jsfiddle.net/5gyfykka/14/)//this.showTooltip(this.datasets[0].bars, true);//在折线图中显示工具提示(问题:多个数据集不起作用 http://jsfiddle.net/5gyfykka/14/)//this.showTooltip(this.datasets[0].points, true);},工具提示事件:[]，显示工具提示:true}var context = $('#chart').get(0).getContext('2d');var chart = new Chart(context).Pie(data, options);

HTML:

<canvas id="chart" width="200" height="200"></canvas>

示例数据:

var 数据 = [{价值:300，颜色:"#F7464A",亮点:#FF5A5E"},{价值:50，颜色:#46BFBD"，亮点:#5AD3D1"},{值:100，颜色:#FDB45C"，亮点:#FFC870"}]

JSFiddle PIE:http://jsfiddle.net/5gyfykka/

JSFiddle 栏/线:http://jsfiddle.net/5gyfykka/14/

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?

解决方案

I had the same problem today and solved it quite easy by adding the options onAnimationComplte and 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.

Note:(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>

Example Data:

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/

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