2016-04-14 4 views
2

Я пытаюсь сделать многострочный (с Флот нескольких осей у) с этикетками во всех значениях, но я не могу это сделать ...ФЛОТ Диаграмма Значение Этикетки с несколькими осями

Мой код:

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

И я получаю эту графику:

enter image description here

Можно было бы поместить этикетки во все пункты? Я хотел бы присвоить значениям событий соответствующей метке ярлыка.

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

ответ

1

Вы должны указать YAxis, для которых координаты вычисляются в функции pointOffset, как описано в documentation. Для метки (ы) с помощью событий:

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

Обновлено fiddle.

+0

И, было бы возможно, что вместо «1» на синей точке это будет «Event1» ?? – Gaia

+0

Да, замените 'el [1]' в содержимом метки div соответствующим именем из массива 'ticks'. – Raidri

+0

Спасибо! Я сделал: http://jsfiddle.net/8v55wzjc/119/, но я получил 2 значения в точке ... – Gaia

Смежные вопросы