FLOT: Как сделать различные цветные точки в том же ряду данных, соединенном строкой?
Я думаю, что, возможно, споткнулся на ограничение Flot, но я не уверен. Я пытаюсь представить единственный ряд данных со временем. "Состояние" объектов представлено на оси Y (существует 5 из них), и время находится на оси X (объекты могут изменять состояния со временем). Я хочу, чтобы график имел точки и строки, соединяющие те точки для каждого ряда данных.
В дополнение к отслеживанию состояния объекта со временем, я также хотел бы представить, это - "Состояние" в любой из конкретных точек. Это я хотел бы сделать путем изменения цвета точек. То, что это означает, является единственным объектом, может иметь различные Состояния в разное время, означая для единственного ряда данных, мне нужна строка, которая соединяет различные точки (точки) различных цветов.
Единственной вещью, которую я видел до сих пор, является способность указать цвет для всех точек в данном dataseries. Кто-либо знает, существует ли способ указать цвета индивидуально?
Спасибо.
2 ответа
С 3 просмотрами, возможно, не стоит отвечать на свой вопрос, но вот решение:
Моя первоначальная проблема заключалась в том, как построить график из точек и линии, но чтобы каждая точка была определенного цвета.
Flot позволяет задавать цвета точек только на уровне датасерий, то есть каждый цвет должен быть своей собственной датасерией. Исходя из этого, решение состоит в том, чтобы сделать один dataseries для каждого цвета и нарисовать этот dataseries только точками, без линий. Затем я должен создать отдельный dataseries, который представляет собой все точки, которые я хочу соединить линией, и нарисовать его без точек и только с линией.
Так, если я хочу показать линию, проходящую через 5 точек пятью разными цветами, мне нужно 6 dataseries: 5 для каждой точки и 1 для линии, которая их соединяет. Flot просто нарисует все друг над другом, и я полагаю, что есть способ указать, что будет показано сверху (чтобы убедиться, что точки будут показаны над линией).
На самом деле, не очень сложно добавить во flot функцию, которая бы выполняла обратный вызов в свой код, чтобы получить цвет для каждой точки. На это у меня ушло около часа, и я ни в коем случае не эксперт по javascript.
Если вы посмотрите на drawSeriesPoints () , все, что вам нужно сделать, это передать параметр обратного вызова в plotPoints () , который будет использоваться для установки ctx.strokeStyle . Я добавил параметр под названием series.points.colorCallback , а drawSeriesPoints () либо использует это, либо простую функцию, которая всегда возвращает series.color.
Одна хитрость: индекс, который вы должны передать вашему обратному вызову, вероятно, не i в plotPoints () , а скорее i / ps .
Надеюсь, это поможет!