Я пытаюсь создать линейную диаграмму с использованием Flot, но я хочу, чтобы метки данных отображались на диаграмме, то есть я хочу, чтобы значение каждой точки появлялось рядом с этой точкой. Я чувствую, что это должен быть вариант, но не может найти его в API. Я просто что-то пропустил, или кто-то знает обходное решение?
Спасибо заранее.
Вот как я добавил эту функцию, включая приятный эффект анимации:
var p = $.plot(...);
$.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');
});
Вы можете переместить позицию и отобразить css в таблицу стилей.
Вам нужна функция здесь в группе Flot Google. Это не похоже на то, что оно когда-либо было реализовано (в API ничего нет, чтобы помещать какие-либо метки внутри самой диаграммы). Я думаю, что ответ на ваш вопрос заключается в том, что Нет, в это время невозможно показать значения рядом с определенными точками на линиях внутри графика.
Оле Ларсон (Ole Larson), главный разработчик Flot, отметил, что показ ярлыков внутри диаграммы отличается от всего остального на FLOT и что им нужно будет подумать о том, как расширить параметры API/сюжета, чтобы сделать это.
Тем не менее, вы можете захотеть опубликовать вопрос на форуме Flot или сделать предложение о ошибка-трекер для новой функции. Оле Ларсон на самом деле действительно хорошо подходит ко всем вопросам, ошибкам и предложениям.
Если кто-то еще ищет быстрое решение, см. этот плагин:
Похоже, что плагин-valuelabels является вилкой previous платиновый плагин - но разветвленный код отображает метки на холсте. Вы можете увидеть демонстрацию того, как это выглядит на странице вики-страницы Github плагина, здесь (это выглядит довольно приятно для глаз).
function redrawplot() {
$('.tt1').remove();
var points = plot.getData();
var graphx = $('#placeholder').offset().left;
graphx = graphx + 30; // replace with offset of canvas on graph
var graphy = $('#placeholder').offset().top;
graphy = graphy + 10; // how low you want the label to hang underneath the point
for(var k = 0; k < points.length; k++){
for(var m = 1; m < points[k].data.length-1; m++){
if(points[k].data[m][0] != null && points[k].data[m][1] != null){
if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
}
if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
}
}
}
}
}
function showTooltip1(x,y,contents, colour){
$('<div class=tt1 id="value">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y,
left: x,
'border-style': 'solid',
'border-width': '2px',
'border-color': colour,
'border-radius': '5px',
'background-color': '#ffffff',
color: '#262626',
padding: '0px',
opacity: '1'
}).appendTo("body").fadeIn(200);
}