muestra información sobre herramientas personalizada al pasar el cursor sobre un punto en flot

Question

En el ejemplo here, sé cómo crear un gráfico de Flot que muestra información sobre herramientas al pasar el ratón. Pero los ejemplos solo muestran cómo mostrar información sobre herramientas que contiene el valor x, el valor y, la etiqueta, etc., y no puedo encontrar la manera de crear más información sobre herramientas personalizada.

¿Hay algún lugar donde pueda adjuntar datos personalizados, a los que pueda acceder al crear la información sobre herramientas?

Por ejemplo, para simplificar, supongamos que mi código es el siguiente:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ]; 
var options = { 
    xaxis: { mode: "time" }, 
    series: { 
    lines: { show: true }, 
     points: { show: true } 
    }, 
    grid: { hoverable: true, clickable: true } 
}; 
$.plot($("#placeholder"), d, options); 

Ahora, al hacer clic en el primer punto de datos, quiero que la información sobre herramientas para mostrar "Hola", y cuando se hace clic en el segundo punto de datos Quiero mostrar "Adiós". ¿Cómo hago esto? Al enlazar el evento plothover

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ }; 

No estoy seguro de qué "elemento" se refiere a, y cómo colocar datos en él.

Answer 1

Aquí hay un áspero JSFiddle example que elevé. No estoy seguro si está funcionando exactamente como te gusta, pero puede provocar una idea ...

[Actualización]

que querrá unirse al evento

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */}); 

para hacer clic en eventos

[Actualización 2]Updated Example

I' Hemos ajustado el ejemplo para usar sus datos de prueba y para trabajar más con lo que describió anteriormente. En cuanto al objeto item, parece que se genera sobre la marcha, por lo que puedo decir, no puede agregar datos adicionales. Sin embargo, puede crear una matriz para almacenar en caché los objetos item al hacer clic y agregar datos adicionales a ellos y usarlos para el evento hover.

Este nuevo ejemplo hace precisamente eso, muestra la información sobre herramientas normal cuando no se hace clic en nada. pero una vez que se hace clic determina si el punto en el que se hizo clic fue el primero o el segundo y agrega una propiedad adicional al objeto item llamado alternateText y lo almacena en una matriz llamada itemsClicked.

Ahora, cuando se asoma un punto sobre ella comprueba para ver si hay una item objeto en caché dentro de la matriz basada en el mismo índice de la corriente item objeto, que se obtiene a través de item.dataIndex. Si hay un índice coincidente en la matriz de memoria caché itemsClicked, obtendrá el objeto item y utilizará la propiedad alternateText que se agregó durante el evento click anterior.

objeto del primer punto item sería algo como esto:

item : { 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

Una vez hecho clic que sería parecido a esto y se almacena en la itemsClicked matriz:

item : { 
    alternateText: 'hello', 
    dataIndex: 0, 
    datapoint: [ 
     1290802154, 
     0.3 
    ], 
    pageX: 38, 
    pageY: 82, 
    series: {/* properties of the series that this point is in */}, 
    seriesIndex: 0 
} 

Por favor, hágamelo saber si algo de esto es útil o no, de lo contrario me callaré y dejaré de actualizar mi respuesta: P

Answer 2

Puede agregar datos a la serie simplemente agregándolo a la matriz de datos.

En lugar de

$.plot(element, [[1, 2], [2, 4]] ...) 

Puede

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...) 

y luego usar esa información para mostrar una etiqueta personalizada.

Ver este violín para un ejemplo completo: http://jsfiddle.net/UtcBK/328/

Answer 3

También puede probar siguiente código:

cuerpo HTML:

<div id="content"> 
    <div class="demo-container"> 
     <div id="placeholder" class="demo-placeholder"></div> 
    </div> 
</div> 

Guión:

<script type="text/javascript"> 
    function showTooltip(x, y, contents, z) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y - 30, 
      left: x - 110, 
      'font-weight':'bold', 
      border: '1px solid rgb(255, 221, 221)', 
      padding: '2px', 
      'background-color': z, 
      opacity: '0.8' 
    }).appendTo("body").show(); 
    }; 

    $(document).ready(
       $(function() { 
        var data = [{ 
         "label": "scott", 
         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]] 
        }, 
     { 
      "label": "martin", 
      "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]] 
     }, 
     { 
      "label": "solonio", 
      "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]] 
     }, 
     { 
      "label": "swarowsky", 
      "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]] 
     }, 
     { 
      "label": "elvis", 
      "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]] 
     }, 
     { 
      "label": "alan", 
      "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]] 
     }, 
     { 
      "label": "tony", 
      "data": [[1317513600000 + 5000000, "88967"]] 
     }, 
     { 
      "label": "bill", 
      "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]] 
     }, 
     { 
      "label": "tim", 
      "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]] 
     }, 
     { 
      "label": "britney", 
      "data": [[1317513600000 + 5000000 * 4, "76772"]] 
     }, 
     { 
      "label": "logan", 
      "data": [[1317513600000 + 5000000 * 5, "88674"]] 
     }]; 

        var options = { 
         series: { 
          bars: { 
           show: true, 
           barWidth: 60 * 60 * 1000, 
           align: 'center' 
          } 
         }, 
         points: { 
          show: true 
         }, 
         lines: { 
          show: true 
         }, 
         grid: { hoverable: true, clickable: true }, 
         yaxes: { 
          min: 0 
         }, 
         xaxis: { 
          mode: 'time', 
          timeformat: "%b %d", 
          minTickSize: [1, "month"], 
          tickSize: [1, "day"], 
          autoscaleMargin: .10 
         } 
        }; 

        $(function() { 
         $.plot($('#placeholder'), data, options); 
        }); 
        $(function() { 
         var previousPoint = null; 
         $("#placeholder").bind("plothover", function (event, pos, item) { 
          if (item) { 
           if (previousPoint != item.datapoint) { 
            previousPoint = item.datapoint; 

            $("#tooltip").remove(); 
            var x = item.datapoint[0], 
        y = item.datapoint[1] - item.datapoint[2]; 
            debugger; 
            showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color); 
           } 
          } 
          else { 
           $("#tooltip").remove(); 
           previousPoint = null; 
          } 
         }) 
        }); 
       }) 
       ); 
</script>