4

誰かが私がグーグルの視覚化ColumnChartapiチャートをハックして、単一の列を異なる色で目立たせることができるかどうか知っていますか？

代替テキスト

ImageChartでそれができることは知っているので、それは必要ありません（イベントは発生せず、x / yラベルもありません）。

本当にSVGでレンダリングされている場合、JavaScriptで結果をトラバースし、CSSスタイルを変更できますか？

4

3 に答える 3

13

本当に安価なハック（非常にうまく機能します）は次のとおりです。

チャートのオプションで、次のようにします。isStacked（true）;

次に、2つの別々のシリーズでデータを渡します。1つはオフカラーのバーを除いてすべてゼロであり、もう1つはオフカラーのバーでのみゼロです。「積み重ねられた」バーは、スクリーンショットに投稿した効果だけをもたらします。

于 2010-04-16T05:05:55.110 に答える
6

jQueryをうまく使用して、グラフのiframeにアクセスできました。きれいではありませんが、機能します。また、プロトタイプを使用するよりも短くなります。

$('#google-chart iframe').contents().find("#chartArea g>g>rect")[2].attributes['5'].value = "#eea746";

上記のコードでは、attributes['5']はrectオブジェクトの「fill」属性を参照しています。

于 2010-03-09T19:20:02.687 に答える
2

必要に応じて結果をトラバースでき（外観によってインラインsvgフラグメントが生成されます）、お気に入りのWebデバッグツール（Opera dragonfly、Firebug、またはWebkit Web Inspector）を開いて、結果がどのようになるかを確認できます。

APIを使用して1つのバーの色を変える方が簡単かもしれませんが、ツリーをトラバースしてスタイルを割り当てたい場合は、問題なく機能するはずです。HTMLの場合と同様に、ツリーをトラバースするために標準のDOMコアfirstChild, nextSibling, parentNodeメソッドを使用できます。

于 2010-03-09T16:44:47.267 に答える