flot chart movable markierungen

Question

Ich habe ein paar Grafiken mit der Möglichkeit gemacht, eine Marke hinein zu setzen, aber ich verstehe nicht, wie man die Markierung mit dem Y-Achsenwert möglich macht.

$.plot($("#flot-chart-@ControlID"), series_@ControlID, { 
     series: { 
      lines: { 
       lineWidth: 2, 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      }, 
      bars: { 
       barWidth: 0.6, 
       align: "center" 
      }, 
      points: { 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      } 
     }, 
     xaxis: { 
      ticks: xlabels_@ControlID, 
      tickDecimals: 0 
     }, 
     colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())), 
     grid: { 
      color: "#999999", 
      hoverable: true, 
      clickable: true, 
      borderWidth: 0, 
      @if (Model.LimitLine != null) 
      { 
       <text> 
        markings: [ 
         { color: '#000', lineWidth: 1, yaxis: { from: @Model.LimitLine, to: @Model.LimitLine }}, 
        ] 
       </text> 
      } 
      }, 
     legend: { 
      show: true 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: function(label, xval, yval) { 
       var content = getLabel_@(ControlID)(xval) + ": " + yval; 
       return content; 
      }, 
     } 
    }); 

Wie kann ich zeigen einen Tooltip mit dem Wert?
Graph Beispiel:

Answer 1

Sie können mit dem Tooltips Plugin nicht tun, aber es ist möglich, wenn sich die Tooltips zu tun. Etwas wie dieses:

$("#placeholder").bind("plothover", function (event, pos, item) { 
    if (item) { // hovering over a datapoint 
     var x = item.datapoint[0].toFixed(2), 
      y = item.datapoint[1].toFixed(2); 

     $("#tooltip").html(item.series.label + " of " + x + " = " + y) 
      .css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200); 
    } else { 
     var hideTooltip = true; 

     // you need to save the Flot object for this (here as "plot") 
     $.each(plot.getOptions().grid.markings, function(idx, marking) { 
      if (Math.abs(pos.y - marking.yaxis.to) < 10) { 
       $("#tooltip").html("Limit: " + marking.yaxis.to) 
        .css({top: pos.pageY + 5, left: pos.pageX + 5}).fadeIn(200); 
       hideTooltip = false; 
       return false; 
      } 
     }); 

     if (hideTooltip) { 
      $("#tooltip").hide(); 
     } 
    }  
}); 

Basiert auf diesem example.