如何在饼图中默认显示标签
Char.js - How to show labels by default in pie chart
我想在页面加载时默认显示标签。但是默认的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
实际上这很容易,你只需要重写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在这里
添加到pieData ex:
var pieData = [
{
value : 30,
color : "#F38630",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
},
...
];
相关文章:
- 如何为显示jquery滑块值的文本框设置默认值
- 我可以配置默认的角度过滤器以显示字符串,以便以搜索词开头的字符串排在第一位
- Parsleyjs:如何取消默认消息显示
- Angular-选择不显示在下拉列表中的默认选项
- JS文件未显示在localhost默认页面之后
- AngularJS:如何默认显示元素,并在按下按钮时切换
- 表排序器寻呼机插件 - 默认显示所有条目
- 获取日期选取器以默认显示今天的日期
- 删除 javascript 中 html 按钮的默认显示样式属性
- iSrcoll4-默认显示滚动条
- Jquery幻灯片中默认显示的数据在启动时切换
- 将日期选择器中的默认显示日期更改为今天的日期
- 如果有多个选择字段,如何通过javascript或jquery刷新默认显示选项
- 如何在饼图中默认显示标签
- 如何在没有任何鼠标事件的情况下默认显示标记内容
- 如何刷新select by javascript或jquery中的默认显示选项
- 将无限滚动调用的结果附加到AngularJS中默认显示的结果
- 在哪里可以找到 HTML 标记的默认“显示”样式属性
- tinyMCE全屏模式下默认显示HTML CODE
- 所有标记的第一级子标记的浮动值将破坏默认显示值