2

イベントの継続時間、繰り返し、重複を示すタイムラインを Google チャートで作成したいと考えています。各行は新しいイベントである必要があり、列は時間の増分である必要があります。

ただし、 Google Charts docsを調べてきましたが、水平バーの長さを範囲指定するだけでなく、同じ行に複数の範囲バーを配置することもできません (重複しない）。

これは、Chrome または別の無料のグラフ ライブラリで可能ですか?

編集：以下のようなチャートを作成したいと思いますここに画像の説明を入力

4

2 に答える 2

6

Google ビジュアライゼーションでこれを再現できると 100% 確信していましたが、理解できない奇妙な動作 (日付を示す赤い線) のために、少し足りませんでした。その問題を解決できれば、残りはうまく機能し、次のようになります。

サンプル画像

コードは次のとおりです。

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Assignment');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Current Assignment');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Next Assignment');
  data.addRows([
    ['Uranus', new Date(1298246400000), {v:new Date(26092800000), f:'2/21-12/20'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Thomas Lamonthezie', new Date(1297036800000), {v:new Date(6393600000), f:'2/7-4/22'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Shuo Li', new Date(0), {v:new Date(0), f:'1/0-1/0'}, new Date(1303689600000), {v:new Date(2937600000), f:'4/25-5/29'}],
    ['Saturne', new Date(1298246400000), {v:new Date(4579200000), f:'2/21-4/15'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Roger Erwin', new Date(1301875200000), {v:new Date(1555200000), f:'4/4-4/22'}, new Date(259200000), {v:new Date(2160000000), f:'4/25-5/20'}],
    ['Rick Maverick', new Date(1302652800000), {v:new Date(2592000000), f:'4/13-5/13'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
  ]);

  //Define date ranges for the chart
  var dateMin = new Date(2010,11,1);
  var dateMax = new Date(2012,0,1);
  var dateToday = new Date(2012,3,15);


  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
         {width:600, height:400,
          isStacked: true,
          series: [{color: 'transparent'},{},{color: 'transparent'},{}],
          hAxis: {
            viewWindow: {
              max: dateMax,
              min: dateMin,
            },
            baseline: dateToday,
            baselineColor: 'red',
          },
         }
        );
}

基本的に、4 つのシリーズを作成します。

  1. ダミーシリーズ（初回課題までの時間）
  2. 最初の割り当ての期間
  3. ダミーシリーズ（1回目と2回目の課題の間の時間）
  4. 2 番目の割り当ての期間

次に、シリーズ 1 と 3 を非表示に設定します。

データについては、日付の計算を行う必要があります (私は Excel で行いました。申し訳ありません)。ただし、基本的には、各割り当ての開始日と終了日を差し引いて期間を取得し、ダミーを 2 番目の開始日として設定するだけです。割り当てから最初の割り当てまでの時間と最初の割り当ての期間を差し引いた時間。

このトリックを使用{value: x, format: y}して、マウスオーバーが適切に機能するようにしました。これを自動化することができます (ここでも、javascript ではかなり時間がかかるため、Excel でデータ処理を行いました)。

次に、設定により最小日付と最大日付が設定され、シリーズが適切な色に変わり、ベースラインが赤に設定されます。残念ながら、私の理解を超えた理由により、日付セットに関係なく、ベースラインはチャートの左側にあることを望んでいます. それを回避する方法を見つけることができれば、あなたはあなたのチャートを持っています.

于 2013-06-21T01:58:17.753 に答える