4

我希望能够设置由谷歌图表 api 创建的仪表图表的字体大小 - https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

API 中似乎没有选项，所以我希望能够在绘制图表后操作 SVG。我认为这可能与 jQuery SVG 插件 - http://keith-wood.name/svg.html

我对如何在绘制后使用插件来更新 SVG 有点困惑。使用萤火虫我知道绘制图表后 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

好的，事实证明你可以在没有插件的情况下使用 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 回答
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 回答