Графики JS Flot: 2 оси Y с одинаковыми данными. один с числовыми данными и один с процентами

Я пытаюсь воссоздать с помощью Flot что-то вроде этого:

введите здесь описание изображения

Левая ось Y представляет деньги, а правая ось Y представляет собой процент от цели (зеленая линия).

Таким образом, в этом примере цель составляет 20000 долларов США (100%), поэтому правая ось Y должна быть выровнена в соответствии с этим.

Мне удалось получить этот jsFiddle, но, как видите, правая ось Y, показывающая проценты, не «выровнена» с реальными данными.

Форматировать ось не проблема:

var percFormatter = function(val, axis) {
    return (val * 100).toFixed() + '%';
}

Но как я могу сделать серию относительно обеих осей?


javascript charts flot
person Jonathan    schedule 29.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете нарисовать график, чтобы получить максимум первых осей. А затем отредактируйте параметры с новым максимальным значением для 2-й оси. Минимальные значения всегда равны 0 для обеих осей.

var plot = $.plot($("#placeholder"), [series.money, series.goal], options);

options.yaxes[1].max = plot.getYAxes()[0].max;

$.plot($("#placeholder"), [series.money, series.goal], options);

Он работает в этой скрипте с некоторыми моими комментариями: http://jsfiddle.net/LXrLf/1/

person Frederik H    schedule 29.10.2012
comment
Большой! Но как я могу получить цель и 100% всегда показывать по оси??? например, в этом fiddel: jsfiddle.net/LXrLf/2, что цель не является округленным числом - person Jonathan; 29.10.2012