Всплывающая подсказка с круговой диаграммой не отображается - PullRequest
Новая
       53

Всплывающая подсказка с круговой диаграммой не отображается

1 голос
/ 23 сентября 2019

Я использую точно такой же код, как в этом примере Скрипка диаграммы 

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

Есть предложения, что могло пойти не так и как это отладить?

ОБНОВЛЕНИЕ: Импортскрипты, которые я использую, и их порядок: 

<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 импорт и помещая этот в конец.Такое же поведение, без успеха.Все круговые диаграммы работают нормально, поэтому я не тестировал сценарии cdn, кроме tooltip. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.js"></script>

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

Я пытался с вашим же кодом на jsfiddle, работал.Кстати, ссылка на всплывающую подсказку для flot должна быть после основного скрипта flot.

Однако вы можете использовать функцию для содержимого, попробуйте следующий код: 

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

enter image description here

Вот важные вещи, на которые следует обратить внимание в содержании всплывающей подсказки:

HTML-теги также разрешены;используйте% s для метки серии, значение %x for X value, %y for Y value and %p for percentage.

Со значениями %x, %y and %p вы также можете использовать .precision, например% x.2 означает, что значение X будет округлено до 2 цифр после десятичной дробиpoint.

Если точность или dateFormat не заданы, то плагин использует tickFormatter для форматирования значений, отображаемых во всплывающей подсказке.

Если вам требуется еще больший контроль над созданием всплывающей подсказки, вы можете передать функцию обратного вызова.(label, xval, yval, flotItem), который должен возвращать строку в описанном формате.

дополнительную информацию можно найти здесь .

0 голосов
/ 24 сентября 2019

Вот рабочий фрагмент.Обратите внимание на порядок загрузки скриптов - вы можете попробовать импортировать ваши локальные файлы таким же образом.Ваш 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>
...