Flot Chart Value具有多个轴的标签

Question

我正在尝试使用所有值中的标签执行Flot多线（具有多个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函数中指定为其计算坐标的y轴，如documentation中所述。对于事件标签，请使用：

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

更新了fiddle。