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

C

Cave Johnson

Gast
Hi,

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

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.


PHP:
<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>
 
Zuletzt bearbeitet:

character

Lt. Commander
Dabei seit
Juli 2008
Beiträge
1.615
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.
 
Zuletzt bearbeitet:
C

Cave Johnson

Gast
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.
 
Top