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脚本的本地副本，也尝试过使用来自云弹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 for X value, %y for Y value and %p for percentage值。

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

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

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

您可以找到更多信息here。

Answer 2

这是工作片段。请注意脚本的加载顺序-您可以尝试以相同的方式导入本地文件。您的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>

船形图饼图工具提示未显示

2 个答案: