5

最終的に、私は次のような非常に最小限の 1 次元チャートを求めています。

単純な折れ線グラフ

軸

  • X 軸: 0 ～ 100、非表示
  • Y 軸: 0 ～ 0 (ただし、3 本の線を描くには -1 ～ 1 が必要な場合があります)

データ

  • ポイントのみ。行がありません。
  • 2 つのデータ セットは異なる色にする必要があります (赤と緑が望ましい)。
  • x 軸上のすべてのデータ (y=0)
  • 形が可能ならXとOがぴったり

飛行機

  • 標準のグリッドの代わりに、x 軸上の特定の点に 3 本の線を引く必要があります。
    例：

    [[40,-1],[40,1]],
[[50,-1],[50,1]],
[[60,-1],[60,1]]

これが私がこれまでに試したことです：

d1 = [[48,0],[16,0],[10,0],[40,0],[30,0],[37,0]];
d2 = [[43,0],[60,0],[74,0],[83,0]];
var options = {
        points: { show: true, fill: true, radius: 5 },
        lines: { show: false, fill: true },
        xaxis: { show: false, min:0, max:100, ticks: false, tickColor: 'transparent' },
        yaxis: { show: false, min:-1, max:1, ticks: false, tickColor: 'transparent' },
        grid: { show:false }
    };
var data = [
        { data: d1, points: { color: '#E07571', fillcolor: '#E07571' } },
        { data: d2, points: { color: '#FDEDB2', fillcolor: '#FDEDB2' } }
    ];
$.plot($('#placeholder'), data, options);

問題:

  • 色が効かない
  • 平面の描き方がわからない
4

2 に答える 2

4

あなたは実際にはすでにかなり近づいています。

色は series.points ではなくシリーズのプロパティであるため、色は機能しません。データと一緒にレベルを上げるだけです。「c」を大文字にする必要があるため、fillColor オプションが機能しません。

垂直線については、グリッドのカスタマイズで説明されているように、マーキングを使用します。

grid: {
    show: true,
    color: "transparent",
    markings: [
        { xaxis: { from: 20, to: 20 }, color: "#888", lineWidth: 5 }
    ]
}

より複雑なポイント シンボルを描画するには、Symbols Pluginを参照してください。カスタム コールバックを定義して独自のシンボルを描画できます。

于 2013-10-24T13:38:28.280 に答える