7

Javascript の棒グラフに対する重複する可能性のある質問: 積み上げ棒 + グループ棒

2 つの値 (濃い青と中間の青) を先週のデータ ポイント (2 つ目の薄い青の「後ろ」) と比較できる積み上げ棒グラフを作成しようとしています。

グループ化され積み上げられた multiBarChart

  1. 最初から、両方の週を 14 本のバーの 1 つの配列にマージしてみました。このmultiBarChart()位置は、バーをグループ化するのに役立ちます。プロパティの値が、、、、、など であるオブジェクトの結合配列を作成しようとしました。 残念ながら、配置に値を使用しないのとは異なります。.stacked(true)x.x00.311.322.3ここに画像の説明を入力lineChart()x

  2. もう 1 つのアイデアは、 group を利用して、同じ値.stacked(false)を持つ (2 つではなく) 4 つのアイテムを提供することです。xこれらは、積み重ねられるのではなく、互いに重なり合って表示されます。 ここに画像の説明を入力 ここでは間隔が良さそうに見えますが、これらを 2 つずつ積み重ねるにはどうすればよいでしょうか。

4

2 に答える 2

2

ねえ、私はd3.jsでグループ化された+積み上げ棒グラフを開発しました。NVD3ではありませんが、役立つ場合があります。

于 2013-01-25T00:27:33.013 に答える
1

私はnvd3の専門家ではないことを前もって言わせてください。私自身、入門段階をかろうじて過ぎています。

そうは言っても、あなたはこれを自分自身に負担をかけすぎているようです.

nvd3 に 2 つのデータ セットを送信し、2 つの間で x が一致するようにしたいと思います。(例: (1,y1a) は (1,y2a) に対応し、(2,y2a) は (2,y2b) に対応するなど)

これは、次の方法でより明確に確認できます。

  1. 彼らのライブコードページに向かいます
  2. グループ/積み上げ棒グラフを選択します。
  3. [データ (JSON)] タブを選択します。
  4. 最初の関数を次のように置き換え、結果の x 値を観察します。

    function() {
      return stream_layers(2,10,.1).map(function(data, i) {
        alert( 'Stream '+i+': '+JSON.stringify(data));
        return {
          key: 'Stream' + i,
          values: data
        };
      });
    }

私が理解している限りでは、それがあなたが探しているモデルです。

于 2012-10-14T19:42:49.057 に答える