[英]flot pie chart tooltip percentage
我的浮動餅圖有問題,它在工具提示中未顯示正確的百分比值,例如,它顯示了series1:%p.0%
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
}
});
請幫助解決此問題。
謝謝
您需要包括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>
工作示例鏈接: http : //jsfiddle.net/Rnusy/335/
您需要工具提示插件。 在此處查看可用插件的完整列表: Flot插件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.