使用多个轴绘制图表值标签

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 函数中计算坐标的 yaxis，如 documentation 中所述。对于事件标签，请使用：

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

已更新 fiddle。

使用多个轴绘制图表值标签

Flot Chart Value Labels with multiple axes

javascript

flot