Flot-Diagramm Wertelabels mit mehreren Achsen

Question

Ich versuche, eine Flot mehrzeilige (mit mehreren y-Achse) mit Etiketten in allen Werten zu tun, aber ich kann es nicht ...

Mein Code ist:

HTML:

<div id="placeholder-bar-chart" class="mychart"></div> 

javascript:

var d1 = [[1456531200000,14.46],[1456704000000,11.07],[1456790400000,13.12],[1456876800000,10.8],[1457049600000,16.51]]; 

var d2 = [[1456617600000,"1"]]; 

var data1 = [ 
{ 
    label: "Values", 
    yaxis: 1, 
    data: d1 
}, { 
    label: "Events", 
    data: d2, 
    yaxis: 2, 
    points: {show: true, 
     radius: 6} 

}]; 
var ticks = [[0,""],[1, "Event1"],[2, "Event2"],[3, "Event3"]]; 

var p = $.plot($("#placeholder-bar-chart"), data1, { 
xaxis: { 
    mode: "time", 
    tickSize: [1, "day"], 
    tickLength: 0, 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 12, 
    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
    axisLabelPadding: 5 
}, 
yaxes: [ 
{ 
    position: "left", 
    color: "black", 
}, 
{ 
position: "right", 
    ticks: ticks, 
    color: "black", 
}], 

grid: { 
    hoverable: true, 
    clickable: false, 
    borderWidth: 0, 
    borderColor:'#f0f0f0', 
    labelMargin:8, 
}, 
legend: { 
    show: true, 
    noColumns: 2 
} 
}); 

$.each(p.getData()[0].data, function(i, el){ 
var o = p.pointOffset({x: el[0], y: el[1]}); 
$('<div class="data-point-label">' + el[1] + '</div>').css({ 
position: 'absolute', 
left: o.left + 4, 
top: o.top - 43, 
display: 'none' 
}).appendTo(p.getPlaceholder()).fadeIn('slow'); 
}); 

$.each(p.getData()[1].data, function(i, el){ 
var o = p.pointOffset({x: el[0], y: el[1]}); 
$('<div class="data-point-label">' + el[1] + '</div>').css({ 
position: 'absolute', 
left: o.left + 4, 
top: o.top - 43, 
display: 'none' 
}).appendTo(p.getPlaceholder()).fadeIn('slow'); 
}); 

Und ich diese Grafik:

Es wäre möglich, die Etiketten auf alle Punkte zu setzen? Ich möchte den Event-Werten das entsprechende Tick-Label zuweisen.

http://jsfiddle.net/gaia/8v55wzjc/117/

Answer 1

Sie müssen die y-Achse angeben, für die die Koordinaten in der pointOffset Funktion berechnet werden, wie in den documentation beschrieben. Für den Fall, Etikett (en) verwenden:

var o = p.pointOffset({x: el[0], y: el[1], yaxis: 2}); 

fiddle aktualisiert.