2

GoogleのAnnotatedTimeLineチャートを使用しています。私のグラフはかなり乱雑で (10 ～ 15 個のデータ セット)、扱いやすくしようとしています。これらの行に沿って、特定の列を有効/無効にするチェックボックスを備えた「インデックス」を追加しました。今、各列の色/太さ/線の品質を取得/設定する方法を考えています。

を使用して特定の列に関する情報を取得できるように見えますgetColumnProperties( column # )が、デバッガーで返されたオブジェクトを見ると、多くのメソッドが表示されますが、プロパティは表示されません。

また：

  1. js デバッガーで「プロパティ」オブジェクトを見るのは、プロパティ名/値を列挙する間違った方法です
  2. ユーザーが設定できるプロパティはありません

どこを見ればいいですか？

4

1 に答える 1

2

グラフ内の各データ値の色を設定する必要があります。こちらのドキュメントを参照してください。このcolorsオプションを使用すると、各セットの色を設定できます（各シリーズの色の配列を渡します）。thickness線の太さを設定しますが、「1つのサイズですべてに対応」オプションであり、シリーズごとに個別に構成することはできません。注釈付きのタイムラインチャートを構成する方法の例は、次のとおりです。

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addColumn('number', 'Sold Papers');
  data.addRows([
    [new Date(2009, 1 ,1), 30000, null, null, 4645, null, null, 12345],
    [new Date(2009, 1 ,2), 14045, null, null, 2374, null, null, 44444],
    [new Date(2009, 1 ,3), 55022, null, null, 5766, null, null, 76545],
    [new Date(2009, 1 ,4), 75284, null, null, 1334, 'Out of Stock', 'Ran out of stock on pens at 4pm', 16345],
    [new Date(2009, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 6467, null, null, 41345],
    [new Date(2009, 1 ,6), 33322, null, null, 3463, null, null, 33665]
  ]);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));
  annotatedtimeline.draw(data, {
                                //'allValuesSuffix': '%', // A suffix that is added to all values
                                'colors': ['blue', 'red', '#0000bb'], // The colors to be used
                                'displayAnnotations': true,
                                'displayExactValues': true, // Do not truncate values (i.e. using K suffix)
                                'displayRangeSelector' : false, // Do not sow the range selector
                                'displayZoomButtons': false, // DO not display the zoom buttons
                                'fill': 30, // Fill the area below the lines with 20% opacity
                                'legendPosition': 'newRow', // Can be sameRow
                                //'max': 100000, // Override the automatic default
                                //'min':  100000, // Override the automatic default
                                'scaleColumns': [0, 1], // Have two scales, by the first and second lines
                                'scaleType': 'allfixed', // See docs...
                                'thickness': 2, // Make the lines thicker
                                'zoomStartTime': new Date(2009, 1 ,2), //NOTE: month 1 = Feb (javascript to blame)
                                'zoomEndTime': new Date(2009, 1 ,5) //NOTE: month 1 = Feb (javascript to blame)
                               });
}

フラッシュチャートであるため、オプション以外で実行できる構成はほとんどありません。グラフをより細かく制御したい場合は、注釈列を使用して折れ線グラフを組み合わせることをお勧めします。日付の範囲を選択できる同様のドラッグ可能なスライダーを下に配置する場合は、折れ線グラフとグラフ範囲フィルターを組み合わせることをお勧めします。

于 2013-03-08T00:45:38.053 に答える