Char.js - 如何在饼图中默认显示标签

Question

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

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

的文档中找到

Answer 1

你把它添加到 pieData ex:

var pieData = [
                {
                    value : 30,
                    color : "#F38630",
                    label : 'Sleep',
                    labelColor : 'white',
                    labelFontSize : '16'
                },
            ...
        ];

Answer 2

其实很简单，你只需要覆盖2个选项属性:

// 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: []

首先你在动画完成时强制绘制工具提示，然后阻止鼠标事件以覆盖默认行为，因为你不再需要它了（这个行为是只显示活动工具提示并隐藏其他）

看我的JSFiddle here

Char.js - 如何在饼图中默认显示标签

Char.js - How to show labels by default in pie chart

javascript

chart.js