FLOT: Как сделать разные цветные точки в одних и тех же рядах данных, связанных линией?
Думаю, я, возможно, наткнулся на ограничение Флота, но я не уверен. Я пытаюсь представить единую серию данных с течением времени. Элемент "Состояние" представлен на оси Y (их 5), а время находится на оси X (элементы могут изменять состояния с течением времени). Я хочу, чтобы граф имел точки и линии, соединяющие эти точки для каждого ряда данных.
В дополнение к отслеживанию состояния элемента во времени, я также хотел бы представить его "Статус" в любом из конкретных пунктов. Это я хотел бы сделать, изменив цвет точек. Это означает, что один элемент может иметь разные статусы в разное время, то есть для одной серии данных мне нужна строка, которая соединяет разные точки (точки) разных цветов.
Единственное, что я видел до сих пор, это возможность указать цвет для всех точек в заданных данных. Кто-нибудь знает, есть ли способ указать цвета в отдельности?
Спасибо.
Ответы
Ответ 1
С 3 видами, возможно, не стоит отвечать на мой собственный вопрос, но вот решение:
Моя первоначальная проблема заключалась в том, как создавать данные о точках и строке, но с каждой точкой будет цвет, который я указываю.
Флот позволяет указывать цвета точек на уровне данных, что означает, что каждый цвет должен быть его собственным dataseries. Имея это в виду, решение состоит в том, чтобы сделать отдельные данные для каждого цвета и нарисовать эти данные с помощью только точек и строк. Затем я должен создать отдельные данные, которые представляют собой все точки, которые я хочу связать с линией, и нарисуйте это без точек и только с линией.
Итак, если я хочу показать строку, проходящую через 5 точек с пятью разными цветами, мне нужно 6 dataseries: 5 для каждой точки и 1 для линии, которая их соединяет. Флот будет просто рисовать все поверх друг друга, и я считаю, что есть способ указать, что показано сверху (чтобы убедиться, что точки показаны над линией).
Ответ 2
Там ты идешь. Вам нужно использовать крючок для рисования.
$(function () {
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
var radius = [10, 20, 30, 40];
function raw(plot, ctx) {
var data = plot.getData();
var axes = plot.getAxes();
var offset = plot.getPlotOffset();
for (var i = 0; i < data.length; i++) {
var series = data[i];
for (var j = 0; j < series.data.length; j++) {
var color = colors[j];
var d = (series.data[j]);
var x = offset.left + axes.xaxis.p2c(d[0]);
var y = offset.top + axes.yaxis.p2c(d[1]);
var r = radius[j];
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
}
};
var plot = $.plot(
$("#placeholder"),
[{ data: d2, points: { show: true } }],
{ hooks: { draw : [raw] } }
);
});
Ответ 3
На самом деле, не сложно добавить функцию для флота, которая перезвонит в ваш код, чтобы получить цвет для каждой точки. Мне потребовался час, и я не эксперт по javascript в какой-либо мере.
Если вы посмотрите drawSeriesPoints()
, все, что вам нужно сделать, это передать параметр обратного вызова plotPoints()
, который будет использоваться для установки ctx.strokeStyle
. Я добавил параметр под названием series.points.colorCallback
, а drawSeriesPoints()
либо использует это, либо просто функцию, которая всегда возвращает series.color.
Одна сложная точка: индекс, который вы должны передать на ваш обратный вызов, вероятно, не является i
в plotPoints()
, а скорее i/ps
.
Надеюсь, это поможет!