-3

グラフの 1 つのセクションを青色に、次に 1 つのセクションを緑色にする方法を見たことがありません。別のシリーズを作成することもできますが、それは私には役に立ちません。ある色の時間 x から時間 y まで、次に時間 y から時間 z までのセクションが必要です。

4

1 に答える 1

0

このタイプの機能は、機能のネイティブ部分としての dygraph では不可能です。ただし、曲線のさまざまな「セクション」を完全に異なる時系列として提供することで実現できます。これはかなり簡単です。

元の時系列に加えて、日時の配列を引数として渡す関数を作成できます。次に、この関数は、日時の配列に基づいて時系列を分割し、通常どおりプロットできる dygraph に適した配列のセットを返します。

Dygraphs はいくつかの色を選択するのに非常に優れていますが、自分で色を制御したい場合は、次のようにすることができます。

g = new Dygraph(
    document.getElementById("yourDiv"),
    data,
    {
        colors: ["#123123", '#321312', '#222333', '#111222']
    }       
);

data は正しくフォーマットされたdygraph データ配列です。dygraph を構成するときに他のオプションを指定することはほぼ間違いありませんが、上記のコード例では、さまざまなシリーズの色を指定する方法を示しました。

時系列を分割するには、少し複雑ですが、実際にはそうではありません。上記のコードでは、4 つの異なる時系列があり、したがって 4 つの異なる色があると想定しています。時系列の分割についてサポートが必要な場合は、疑似コード (またはご存知の任意のコーディング言語) でそれを実現する方法を慎重に検討することをお勧めします。喜んで JS.

たとえば、個々の時系列が次のようになっているとします。

var basicTimeseries = [
    [1384337076000, 123],
    [1384337077000, 321],
    [1384337078000, 111],
    [1384337079000, 222],
    [1384337080000, 333],
    [1384337081000, 132],
    [1384337082000, 321],
    [1384337083000, 122],
    [1384337084000, 322],
    [1384337085000, 333]
]

ここで、これは配列の配列であり、セカンダリ (内部) 配列には ms タイムスタンプと値があります。これを、既に知っているルール (例: 1384337079000 より前のデータ、この後と 1384337082000 より前のデータ、およびこれより後のデータは時間の終わりまで) に基づいて 3 つの別々の時系列に分割したいとします。時系列を 3 つの異なる曲線に分割します。これらをダイグラフにプロットします。dygraphs が受け入れるデータ構造を既に認識しているはずです。例えば：

var dygraphData = [
    [X1,Y1, ... , N1],
    [X2,Y2, ... , N2],
    [X3,Y3, ... , N3],
    [X4,Y4, ... , N4]
]

ここで、データ構造は配列の配列であり、2 番目の (内部) 配列には x 軸の値が格納され、次にその特定の x 軸値での各時系列曲線のポイントが格納されます。

次のように実行できます。

var dygraphData = []; // Initialise
$each.(basicTimeseries, function (i,e) {
    dygraphData[i] = []; // Initialise
    if ( e[0] < 1384337076000 ) {
        dygraphData[i].push([e[0], e[1], NaN, NaN]); // Push the x-axis and 1st curve
    } else if ( e[0] >= 1384337076000 && e[0] < 1384337082000) {
        dygraphData[i].push([e[0], NaN, e[1], NaN]); // Push the x-axis and 2nd curve
    } else if ( e[0] >= 1384337082000) {
        dygraphData[i].push([e[0], NaN, NaN, e[1]]); // Push the x-axis and 3rd curve
    } else {
        console.log("How did this happen?");
    }
});

明らかに、上記のコードは非常に冗長でかなり厳格ですが、何が起こっているのかを理解するのに役立つはずです。次に、データセットとして dygraphData を渡して dygraphs を呼び出すことができます。

于 2013-11-11T11:36:08.483 に答える