Question

我希望能够设置由Google图表API创建的计量表的字体大小 - https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

API中似乎没有选项，所以我希望能够在绘制图表后操纵SVG。我认为这可能适用于jQuery SVG插件 - 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 } );

但似乎并没有这样做。有人可以提供任何建议吗？

Answer 1

你可以通过css：

来完成

svg:first-child > g > text[text-anchor~=middle]{
    font-size:9px;
}

Answer 2

好的，事实证明你可以在没有插件的情况下使用jQuery操作SVG。麻烦的是选择iframe中的元素。我可以使用以下代码更新字体大小。

$('#gaugeChartDiv iframe').each(function() {
    $('#chartArea svg text:first', this.contentWindow.document||this.contentDocument).attr('font-size', 8);
});

Answer 3

  /* for gauge indicators text */
  .gauge svg g text {
    font-size: 18px;
  }
  /* for middle text */
  .gauge svg g g text {
    font-size: 24px;
  }

Google Chart API - 设置Gauge图表字体大小

3 个答案: