FLOT: Как сделать разноцветные точки в одном ряду данных, соединенные линией?

Question

Думаю, я наткнулся на ограничение Флота, но я не уверен. Я пытаюсь представить один ряд данных с течением времени. «Состояние» элементов представлено на оси Y (их 5), а время на оси X (элементы могут со временем менять состояние). Я хочу, чтобы на графике были точки и линии, соединяющие эти точки для каждого ряда данных.

Помимо отслеживания состояния элемента с течением времени, я также хотел бы представить его «Статус» в любой из конкретных точек. Это я хотел бы сделать, изменив цвет точек. Это означает, что один элемент может иметь разные статусы в разное время, что означает, что для одного ряда данных мне нужна линия, которая соединяет разные точки (точки) разных цветов.

Единственное, что я видел до сих пор, - это возможность указать цвет для всех точек в данных наборах данных. Кто-нибудь знает, есть ли способ указать цвета по отдельности?

Спасибо.

Answer 1

Вот и ты, приятель. Вам нужно использовать крюк для вытяжки.

$(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] } }
  );  
});

Answer 2

С 3 видами, возможно, не стоит отвечать на мой собственный вопрос, но вот решение:

Моя первоначальная проблема заключалась в том, чтобы построить наборы точек и линий, но при этом каждая точка представляла собой цвет, который я определяю.

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

Поэтому, если я хочу показать линию, проходящую через 5 точек, с пятью разными цветами, мне нужно 6 наборов данных: 5 для каждой точки и 1 для линии, которая их соединяет. Flot просто нарисует все поверх друг друга, и я считаю, что есть способ указать, что будет показано сверху (чтобы убедиться, что точки отображаются над линией).

Answer 3

На самом деле, не очень сложно добавить функцию для перемещения, которая бы вызывала ваш код, чтобы получить цвет для каждой точки. Это заняло у меня около часа, и я ни в коем случае не эксперт по javascript.

Если вы посмотрите на drawSeriesPoints(), все, что вам нужно сделать, это передать параметр обратного вызова в plotPoints(), который будет использоваться для установки ctx.strokeStyle. Я добавил опцию series.points.colorCallback, и drawSeriesPoints() либо использует ее, либо простую функцию, которая всегда возвращает series.color.

Один хитрый момент: индекс, который вы должны передать обратному вызову, вероятно, не является i в plotPoints(), а скорее i/ps.

Надеюсь, это поможет!