FLOT圖表值標籤與多軸

Question

我試圖做一個海軍報多（有多個y軸）與所有值的標籤，但我不能這樣做...

我的代碼是：

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'); 
}); 

我得到這個圖形：

可以將標籤放在所有點上？ 我想將事件值賦予相應的刻度標籤。

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

Answer 1

你需要指定其座標在pointOffset函數計算像documentation描述的y軸。對於事件標籤使用：

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

更新fiddle。