4

googlechartapiによって作成されたゲージチャートのフォントサイズを設定できるようにしたいと思います-https ://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

APIにはオプションがないようですので、チャートを描いた後でSVGを操作できるようにしたいと思います。これはjQuerySVGプラグインで可能かもしれないと思います-http://keith-wood.name/svg.html

プラグインを使用して、描画後にSVGを更新する方法に少しこだわっています。Firebugを使用すると、グラフが描画された後、htmlが次のようになることがわかります。

<iframe>
    <html>
        <head>...</head>
        <body>
            <div id="chartArea">
                <svg>
                    <g>
                       //a couple of circles
                       <text></text> //The first text element is the title
                       //the rest of the graph
                    </g>
                </svg>
            </div>
        </body>
    </html>
</iframe>

私はこのようなものを書くことができるようにしたいと思います：

$('#gaugeChartDiv #chartArea').svg('get').change('text:first', { 'font-size' : 8 } );

しかし、それはそのようには機能しないようです。誰かアドバイスはありますか？

4

3 に答える 3

5

cssを介してそれを行うことができます：

svg:first-child > g > text[text-anchor~=middle]{
    font-size:9px;
}
于 2016-09-06T18:35:54.547 に答える
0 
  /* for gauge indicators text */
  .gauge svg g text {
    font-size: 18px;
  }
  /* for middle text */
  .gauge svg g g text {
    font-size: 24px;
  }
于 2016-07-12T20:22:47.580 に答える
0

わかりました。プラグインなしで jQuery を使用して SVG を操作できることがわかりました。問題は、iframe 内の要素を選択することでした。次のコードを使用してフォント サイズを更新できます。

$('#gaugeChartDiv iframe').each(function() {
    $('#chartArea svg text:first', this.contentWindow.document||this.contentDocument).attr('font-size', 8);
});
于 2012-08-31T11:50:49.463 に答える