Флот-диаграммы: как изменить параметры стиля после визуализации диаграммы (например, с помощью внедрения кода)?

Можно ли изменить стиль компонентов диаграммы Flot на лету — либо с помощью консоль или скрипт — после того, что график отрендерился? То есть откуда-то из вне внутренних конфигураций графика Flot (которые изначально определяли стиль графика).

Чтобы выразить мой вопрос в простом примере использования: у меня есть страница, содержащая диаграмму Flot, на которой столбцы имеют неправильный цвет. Используя JS-консоль Web Inspector, я хочу изменить цвет полос (линий?) с синего, скажем, на коричневый. (И у меня нет возможности редактировать конфиги в jquery.flot.js.) Теперь я хочу ввести код из консоли, который может изменить цвет полос.

Я только хочу, чтобы мне намекнули на базовую структуру кода, поскольку я застрял (нет, я не особенно средний или продвинутый пользователь).

Скриншот 1 — визуализированная диаграмма без изменений (стрелка указывает, что я хочу изменить):

Скриншот 1, визуализированная диаграмма

… API Flot говорит:

$.plot(placeholder, data, options)

Но я не хочу устанавливать/изменять data (который уже был нарисован), я просто хочу изменить его цветовое представление с синего, скажем, на коричневый. Единственный эффект от изменения что-то, которого мне удалось добиться, был этот (ужасно бестолковый) кусок кода:

$.plot("#chart", { series: {color: "#6C564C"} });

Что превратило график в (Скриншот 2):

Скриншот 2, измененный стиль диаграммы Flot

Я не знаю, почему диаграмма исчезла, и нам не обязательно решать эту проблему. Все, что мне нужно, — это простая структура для изменения параметров диаграммы Flot посредством внедрения кода.


javascript jquery options code-injection flot
person Henrik    schedule 28.01.2012    source источник
comment
Это часто спрашивают. Flot не предоставляет никаких методов для управления графиком после его рисования. API ожидает перерисовки диаграммы для отображения любых изменений. К счастью, Flot рендерится очень быстро, поэтому обычно это не имеет большого значения. В приведенном выше примере кода ваш вызов перерисовал бы график, НО вы не указали данные.   -  person Mark    schedule 29.01.2012
comment
@ Марк: это вполне правильный ответ, спасибо! Может быть, лучше опубликовать его как ответ, чтобы я мог проверить этот вопрос как ответ?   -  person Henrik    schedule 29.01.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете изменить цвет уже нарисованной серии, изменив объект данных и используя setData(). Это быстрее, чем повторный вызов $.plot(), но он не будет пересчитывать сетку и тики. Если ваши фактические точки данных не меняются, это не проблема.

var data = [
    {
        label: "Your series",
        data: rawData,
        color: "#f00"
    }
]

// Initial draw:
var flotObject = $.plot("#chart", data, options);

// ...

// Change the colour:
data[0].color = "yellow"; // Change only the colour of the original data object
flotObject.setData(data);
flotObject.draw();
person Daniel    schedule 15.01.2016