javascript - Flot 图表饼图工具提示未显示

Question

我使用与本例中完全相同的代码 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>

Answer 1

我在 jsfiddle 上尝试使用您的相同代码，确实有效。顺便说一句，flot 工具提示 cdn 链接应该在 flot 主脚本之后。

但是您可以在内容上使用函数，请尝试以下代码:

content: function(label, xval, yval, flotItem) {
   return label  + ' x:' + xval + ' y: ' + yval;
},

以下是有关工具提示内容的重要注意事项:

HTML 标签也是允许的；使用 %s 作为系列标签，%x 作为 X 值，%y 作为 Y 值，%p 作为百分比值。

对于 %x、%y 和 %p 值，您还可以使用 .precision，例如 %x.2 表示 X 的值将四舍五入到小数点后 2 位。

如果未设置精度或日期格式，则插件使用 tickFormatter 来格式化工具提示上显示的值。

如果您需要更多地控制工具提示的生成方式，您可以传递一个回调函数(label、xval、yval、flotItem)，该函数必须返回具有所描述格式的字符串。

您可以找到更多信息here .