15

Flotの制限に遭遇したかもしれませんが、よくわかりません。時間の経過とともに単一のデータ系列を表現しようとしています。アイテムの「状態」はY軸に表示され（5つあります）、時間はX軸に表示されます（アイテムは時間の経過とともに状態を変更できます）。各データ系列の点とそれらの点を結ぶ線をグラフに含める必要があります。

アイテムの状態を経時的に追跡することに加えて、特定のポイントのいずれかでの「ステータス」を表したいと思います。これは、ポイントの色を変えてやりたいと思います。これが意味するのは、単一のアイテムが異なる時間に異なるステータスを持つ可能性があるということです。つまり、単一のデータ系列の場合、異なる色の異なるポイント（ドット）を結ぶ線が必要です。

これまでに見たのは、特定のデータシリーズのすべてのポイントの色を指定できることだけです。色を個別に指定する方法があるかどうか誰かが知っていますか？

ありがとう。

4

3 に答える 3

16

ほら、おい。ドローフックを使用する必要があります。

$(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] } }
  );  
});
于 2010-09-29T13:00:33.873 に答える
11

3 つのビューがあるので、私自身の質問に答える価値はないかもしれませんが、解決策は次のとおりです。

私の最初の問題は、点と線のデータ系列をプロットする方法でしたが、各点は指定した色です。

Flot では、データ系列レベルでのみドットの色を指定できます。つまり、各色は独自のデータ系列でなければなりません。これを念頭に置いて、解決策は、色ごとに 1 つのデータ系列を作成し、そのデータ系列を線ではなく点のみで描画することです。次に、線で接続したいすべてのドットである別のデータシリーズを作成し、点なしで線のみを描画する必要があります。

したがって、5 つの点を通る線を 5 つの異なる色で表示したい場合、6 つのデータ系列が必要です。各点に 5 つ、それらを結ぶ線に 1 つです。Flot は単純にすべてを重ねて描画しますが、上に何を表示するかを指定する方法があると思います (点が線の上に表示されるようにするため)。

于 2010-02-17T20:36:29.980 に答える
5

実際には、各ポイントの色を取得するためにコードにコールバックする機能を flot に追加することはそれほど難しくありません。約 1 時間かかりました。私は決して JavaScript の専門家ではありません。

を見ると、設定に使用されるdrawSeriesPoints()コールバック パラメータを渡すだけで済みます。というオプションを追加し、それを使用するか、常に series.color を返す単純な関数を使用します。plotPoints()ctx.strokeStyleseries.points.colorCallbackdrawSeriesPoints()

1 つのトリッキーなポイント: コールバックに渡す必要があるインデックスは、おそらくiinplotPoints()ではなくi/ps.

お役に立てれば！

于 2010-03-11T23:27:55.887 に答える