谷歌圖表API - 設置計圖表字體大小

我希望能夠設置由谷歌圖表API創建的計圖表的字體大小 - https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge 谷歌圖表API - 設置計圖表字體大小

似乎沒有要在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 });

但它似乎並沒有這樣的。任何人都可以提供建議嗎？

來源

2012-08-31 user1573618

好吧，所以事實證明，你可以使用沒有插件的jQuery來操縱SVG。麻煩的是選擇iframe中的元素。我可以使用下面的代碼更新字體大小。

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

來源

2012-08-31 11:50:49 user1573618

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

來源

2016-07-12 20:22:47

你可以做到這一點通過CSS：

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

來源

2016-09-06 18:35:54 user2755541

真棒，謝謝！ –

完美無缺！ 10倍！ –

谷歌圖表API - 設置計圖表字體大小

回答

相關問題