[jQuery/Flot] Tooltip nicht bei Säulen anzeigen

[Cave Johnson]

Hi,

ich habe ein Flot-Chart, welches Säulen und einzelne Datenpunkte besitzt:

Anhang anzeigen 271067​

Jetzt möchte ich gerne, dass Tooltipps angezeigt werden, aber nur bei den Datenpunkten, nicht bei den Säulen. Hat jemand eine Idee, wie ich das machen kann?

Irgendwie müsste ich im Code in Zeile 58 feststellen, ob das 'item' eine Säule oder ein Punkt ist. Vielleicht irgendwie mit 'width'? Das wäre bei den Punkten ja nur 1, bei den Säulen mehr.

Kenne mich mit JS leider nicht wirklich aus.

<script type="text/javascript">
$(function () {
    var sin = [], cos = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }
var stack = 0, bars = true, lines = false, steps = false;
    var plot = $.plot($("#placeholder<?php echo $chartid; ?>"),
     [{
       data: [ [0.3, 30, 10], [2.3, 80, 40], [3.3, 10, 50] ],
       label: 'data1',
       bars: { show: bars, barWidth: 0.4 },
       color: '#28b'
     },{
       data: [ [0.5, 20], [2.5, 60], [3.5, 45] ],
       label: 'data2',
       lines: { show: false },
       points: { symbol: "cross", show: true },
       color: '#333'
     }],{
       series: {
       },
       grid: { hoverable: true, clickable: false },
       xaxis: { ticks: xticks, min: 0, max: 24 },
       yaxis: { ticks: 10, min: 0, max: 90 }
     });

    function xticks() {
      var res = [];
      for(x = 0; x <= 23; x++) {
        res.push(x);
      }
      return res;
    }

    function showTooltip(x, y, conts) {
      $('<div id="tooltip">' + contents + '</div>').css( {
          position: 'absolute',
          'text-align': 'center',
          display: 'none',
          top: y - 50,
          left: x - 45,
          border: '2px solid #069',
          'border-radius': '3px',
          padding: '3px',
          'font-family': 'Arial',
          'font-size': '12px',
          'background-color': '#fff',
          'z-index': '1001',
          opacity: 0.80
      }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder<?php echo $chartid; ?>").bind("plothover", function (event, pos, item) {

      if (item) {
        if (previousPoint != item.dataIndex) {
          previousPoint = item.dataIndex;

          $("#tooltip").remove();

          var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);

          showTooltip(item.pageX, item.pageY,
           Math.round(y, 0));
        }
      }
      else {
        $("#tooltip").remove();
        previousPoint = null;
      }
  });

    $("#placeholder<?php echo $chartid; ?>").bind("plotclick", function (event, pos, item) {
      if (item) {
        plot.highlight(item.series, item.datapoint);
      }
    });
});
</script>

 

[character]

Also vorweg: Ich habe mit Flot noch nicht gearbeitet und im Moment relativ wenig Zeit mich da genauer einzulesen. Trotzdem habe ich eben mal ueber die API Docs geschaut.

Das plothover-Event bekommt ja das item uebergeben, ueber dem die Maus gerade ist (Zeile 56).
Laut Doku hat das item-Objekt u.A. die Properties "series" und "seriesIndex", wodurch eine Zuordnung zur jeweiligen Datenreihe moeglich ist.

Dementsprechend muesstest du jetzt nur checken, ob die series des items derjenigen series entspricht, fuer die du Tooltips anzeigen willst (also die mit den Punkten). Wenn nein, zeigst du eben keinen Tooltip an. Das ginge z.B. ueber seriesIndex.

Edit: Anscheinend kannst du auch einfach das ganze Hover-Event fuer einzelne Series abschalten, z.B. durch "hoverable: false" nach Zeile 14. Das waere offensichtlich die elegantere Loesung.

 

[Cave Johnson]

Beides klappt, perfekt, danke

Die letzte Variante hatte ich schon im Blick, habe aber die komplette Zeile 24 jeweils zu den beiden Serien eingefügt (einmal true, einmal false), und damit tat sich dann gar nichts mehr.