Google Chartsのマテリアルデザイン版では、棒グラフの棒1本ごとのスタイル指定はできないのか

Question

Google Chartsを使っていたのですが、1本毎に棒の色を変えようとしたところでつっかえてしまいました。

jsFiddleで再現してみたのですが、データテーブルにrole: 'style'となる列を入れても、従来のgoogle.visualization.BarChartではその色で出るのに対して、マテリアルデザインのgoogle.charts.Barでは色設定を無視してデフォルト表示となってしまいます。

google.charts.Barでは、別な指定方法が必要なのでしょうか、それとも（データごとに別系列にするという荒業を使わない限り）実現不可能なのでしょうか。

Answer 1

Stack Overflowに同じような質問がありました。

これを見る限り現時点では標準機能ではできないみたいですが、google.visualization.events.addListenerを使って実現してますね。動くjsFiddleもありましたよ。

Comments

[maisumakun]

今のところは「無理やりSVGを書き換える」ぐらいの手段しかなさそう、ということですね。ありがとうございます。

Answer 2

下記ドキュメントに従い、colors を指定したところ、色は変わりましたが、全てのバー色が colors[0] になってしまいました。

• How to Customize Charts  |  Charts  |  Google Developers
• An Example of a Google Bar Chart - JSFiddle

var options = {
  /* ...中略... */
  colors: ['green', 'blue', 'red', 'black', 'gray']
}

var material = new google.charts.Bar(document.getElementById('chart_div'));

// var material = new google.visualization.BarChart(document.getElementById('chart_div'));
material.draw(data, options);

ただ、下記ドキュメント、デモページを読む限りでは指定方法はほぼ合っている気がするので、私が正確に理解できていないだけかもしれません。

• Bar Charts  |  Charts  |  Google Developers

Re: maisumakun さん

Comments

[maisumakun]

colorsの複数指定は（自分自身も別な場所で使っていますが）複数系列がある場合に、系列ごとに色を変えるもので、1本ごとに設定できるものではないようです（1つごとに別系列に所属させるでもすれば別ですが）。

[think49]

なるほど。つまり、「系列を分けなければ色を変更できない」という事なのですね。勉強になりました。