[英]flot pie chart tooltip percentage
I have having a problem with flot pie chart, its not showing correct percent value in tooltip, for example it shows series1:%p.0%
我的浮动饼图有问题,它在工具提示中未显示正确的百分比值,例如,它显示了series1:%p.0%
js code js代码
var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Please help to resolve this. 请帮助解决此问题。
thanks 谢谢
You Need to include jquery.flot.tooltip.min.js
and change few setting as per below working example to display the tooltip with value. 您需要包括jquery.flot.tooltip.min.js
并根据以下工作示例更改一些设置以显示带有值的工具提示。
datapie = [ {label: "Running", data: 19.5, color: '#e1ab0b'}, {label: "Stopped", data: 4.5, color: '#fe0000'}, {label: "Terminated", data: 36.6, color: '#93b40f'} ]; function legendFormatter(label, series) { return '<div ' + 'style="font-size:8pt;text-align:center;padding:2px;">' + label + ' ' + Math.round(series.percent)+'%</div>'; }; $.plot($("#placeholder"), datapie, { series: { pie: {show: true, threshold: 0.1, // label: {show: true} } }, grid: { hoverable: true }, tooltip: true, tooltipOpts: { cssClass: "flotTip", content: "%p.0%, %s", shifts: { x: 20, y: 0 }, defaultTheme: false }, legend: {show: true, labelFormatter: legendFormatter} });
#flotTip { padding: 3px 5px; background-color: #000; z-index: 100; color: #fff; opacity: .80; filter: alpha(opacity=85); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script> <script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script> <script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script> <div id="placeholder" style="width:500px;height:400px;"></div>
Working Example Link : http://jsfiddle.net/Rnusy/335/ 工作示例链接: http : //jsfiddle.net/Rnusy/335/
You need the Tooltip plugin. 您需要工具提示插件。 See a complete list of available plugins here: Flot plugins 在此处查看可用插件的完整列表: Flot插件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.