未显示Flot图表饼图工具提示
我使用的代码与示例Chart fiddle中的代码完全相同
datapie = [
{label: "Running", data: [19.5, 1], color: '#e1ab0b'},
{label: "Stopped", data: [4.5, 2], color: '#fe0000'},
{label: "Terminated", data: [36.6, 3], 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: "%x %y %p.0 %s",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
legend: {show: true, labelFormatter: legendFormatter}
});图表可以工作，可悬停，但不显示工具提示。
我一直在使用js脚本的本地副本，也尝试使用来自cloud flare Cdn links的副本。
有没有什么建议可能会出错，以及如何调试？
更新:导入我使用的脚本及其顺序：
<script src="/Vendor/Flot/jquery.flot.js"></script>
<script src="/Vendor/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
<script src="/Vendor/Flot/jquery.flot.pie.js"></script>我也一直在测试这个，事先对第一个tooltip导入进行了注释，并将这个放在了最后。同样的行为，不会成功。所有饼图都能正常工作，所以我只测试了tooltip之外的cdn脚本。
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.js"></script>回答 2
Stack Overflow用户
发布于 2019-09-24 04:57:30
我试着在jsfiddle上用你同样的代码，成功了。顺便说一句，flot工具提示cdn链接应该在flot主脚本之后。
但是，您可以在内容上使用函数，请尝试以下代码：
content: function(label, xval, yval, flotItem) {
return label + ' x:' + xval + ' y: ' + yval;
},
以下是工具提示内容中需要注意的重要事项：
也允许使用%x for X value, %y for Y value and %p for percentage标记；使用%s作为系列标签，HTML值。
对于%x, %y and %p值，您还可以使用.precision，例如%x.2表示X的值将舍入到小数点后的2位数。
如果没有设置精度或dateFormat，则插件使用tickFormatter来格式化工具提示上显示的值。
如果您需要对如何生成工具提示进行更多的控制，您可以传递一个回调函数(label，xval，yval，flotItem)，该函数必须以所描述的格式返回一个字符串。
你可以在here上找到更多信息。
Stack Overflow用户
发布于 2019-09-24 16:43:35
下面是可用的代码片段。请注意脚本的加载顺序-您可以尝试以相同的方式导入本地文件。你的javascript应该在<body>之后。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.js"></script>
<style>
.flotTip {
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
opacity: .80;
filter: alpha(opacity=85);
}
</style>
</head>
<body>
<div id="placeholder" style="width:500px;height:400px;"></div>
</body>
<script>
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
}
});
</script>
</html>
https://stackoverflow.com/questions/58069054
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号