3

これに関する他の多くの質問を読み、提供されたすべてのコード例を試しましたが、どれも機能しませんでした。バーごとに個別の色が必要で、これがグラフに渡すデータです。

var data = google.visualization.arrayToDataTable([
    ['Month', 'Count'],
    ['January 2009', 10],
    ['February 2009', 20],
    ['March 2009', 10],
    ['April 2009', 20],
    ['May 2009', 10],
    ['June 2009', 20],
    ['July 2009', 10],
    ['August 2009', 20],
    ['September 2009', 10],
    ['October 2009', 20],
    ['November 2009', 10],
    ['December 2009', 20]
]);

ここで提案されているデータを設定する方法を試しましたGoogleチャート、バーごとに異なる色ですが、これはX軸に文字列値があるとうまくいかないようです。

文字列の X 値、数値の Y 値を持ち、色を個別に設定するにはどうすればよいですか?

理想的には、色の配列を渡すだけでなく、バ​​ーごとに色を明示的に設定したいのですが、これは可能ですか?

4

1 に答える 1

2

これを行う 1 つの方法は、データのセットごとに異なる系列を作成することです。したがって、次のようにデータを設定するのではなく、

var data = google.visualization.arrayToDataTable([
    ['Month', 'Count'],
    ['January 2009', 10],
    ['February 2009', 20],
    ['March 2009', 10],
    ['April 2009', 20],
    ['May 2009', 10],
    ['June 2009', 20],
    ['July 2009', 10],
    ['August 2009', 20],
    ['September 2009', 10],
    ['October 2009', 20],
    ['November 2009', 10],
    ['December 2009', 20]
]);

次のように、データのセットごとに個別の列を追加します。

var data = google.visualization.arrayToDataTable([
    ['Month', 'Jan', 'Feb', 'Mar', 'Apr'],
    ['January 2009', 10, null, null, null],
    ['February 2009', null, 20, null, null],
    ['March 2009', null, null, 10, null],
    ['April 2009', null, null, null, 20],
]);

これにより、各シリーズが異なる色になります (また、各シリーズと凡例の個々のアイテムが作成されますが、アプリケーションによっては魅力的でない場合もあります)。

for ループを記述して元のデータを調べ、次のように null を自動的に追加できます。

  for (var i = 0; i < rawData.getNumberOfRows(); i++) {
    data.addColumn('string', rawData.getFormattedValue(i, 0));
  };

  for (var j = 0; j < rawData.getNumberOfColumns() - 2; j++) {
    data.addRow();
    data.setValue(j, 0, rawData.getColumnLabel(j + 1));
    for (var i = 0; i < rawData.getNumberOfRows(); i++) {
      data.setValue(j, i + 1, rawData.getValue(i, j+1));
    };
  };

列を追加すると、すべての「null」値が追加され、必要に応じてデータ値を設定できます。この比較的厄介な方法 (すべての余分なシリーズを追加する) を行わない限り、API 内でさまざまなシリーズに色を付ける方法はありません。

このようにしたくない場合は、SVG を掘り下げて、代わりに CSS を使用して SVG を操作する方法を理解することをお勧めします (ただし、これにより IE とのブラウザーの互換性の問題が発生します)。

于 2013-02-05T00:29:34.197 に答える