jQuery flot - показывать процентное изменение от предыдущей точки на линейном графике

Question

jQuery flot - показывать процентное изменение от предыдущей точки на линейном графике

0

У меня есть графический график с использованием флота. Я бы хотел показать выше каждой точки процентное изменение от предыдущей точки. Я просмотрел документы, и я не вижу нигде, показывая, что это возможно. Является ли это возможным?

Chris 09 март 2014, в 20:45

Источник

Теги:

jquery

flot

1 ответ

Ещё вопросы

Mark · Accepted Answer · 2014-03-09T17-50-00.000Z

В то время как у флота есть плагин с маркировкой точек, мне легче наклеить эти очки самостоятельно. Здесь быстрый фрагмент кода, который будет обозначать точки с их процентным изменением от последней точки:

var series = [{data: [[0, 1.2], [1, 3], [2, 9.2], [3, 10]]},
              {data: [[0, 6], [1, 7], [2, 13], [3, 17]]}]                  

somePlot = $.plot("#placeholder", series, {xaxis:{min:-0.2, max:3.2}});

var ctx = somePlot.getCanvas().getContext("2d");
mySeries = somePlot.getData();
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "13px 'Segoe UI'";
ctx.fillStyle = "black";
for (var i = 0; i < mySeries.length; i++){
    for (var j = 0; j < mySeries[i].data.length; j++){
        if (j == 0) continue;
        var x = mySeries[i].data[j][0];
        var y = mySeries[i].data[j][3];
        var lastY = mySeries[i].data[j-1][4];
        var text = (((y - lastY) / lastY) * 100).toFixed(1) + '%'
        var metrics = ctx.measureText(text);
        var xPos = (xaxis.p2c(x)+offset.left) - metrics.width/2;
        var yPos = yaxis.p2c(y) + offset.top - 5;
        ctx.fillText(text, xPos, yPos);
    }
}

Заклинай здесь.

Результат: