Char.js-如何在饼图中默认显示标签 [英] Char.js - How to show labels by default in pie chart

问题描述

我想在页面加载时默认显示标签。但是默认的chart.js在我们将鼠标悬停之前不会显示任何标签。我正在编写如下代码。

I want to show the labels by default when the page loads. But default chart.js will not show any labels until we do mouseover. I am writing code like below.

var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx).Pie(pieData,{                        
                    animationSteps: 100,
                    animationEasing: 'easeInOutQuart',
                    scaleShowLabels : true                  
                    });

这是我的数据。

var pieData = [
                {
                    value: 100,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "New",
                },
                {
                    value: 220,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "In Progress"
                }];

默认显示标签的属性是什么？我在 chart.js 的文档下找不到/ p>

What is the property to show the labels by default? I am not able to find under the documentation of chart.js

推荐答案

实际上，这很容易，您只需覆盖2个选项属性：

Actually it is quite easy, you only have to override 2 options properties :

// Draw the tooltips when the animation is completed
onAnimationComplete: function() {
    this.showTooltip(this.segments);
},

// Block the mouse tooltip events so the tooltips
// won't disapear on mouse events
tooltipEvents: []

首先，您必须在动画制作完成后绘制工具提示，然后阻止鼠标事件以覆盖默认行为不再需要它（此行为是仅显示活动的工具提示并隐藏其他提示）

First you force to draw the tooltips when animation is completed, and then you block the mouse events to override the default behaviour as you don't need it anymore (this behaviour is to show only the active tooltip and hide the others)

请参阅我的 JSFiddle此处

这篇关于Char.js-如何在饼图中默认显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！