更改谷歌條形圖上的字體

我正在嘗試更改谷歌條形圖上所有內容的字體。它適用於除了工具提示之外的所有內容。至少，我認爲它被稱爲工具提示 - 它是您將鼠標懸停在欄上時顯示的字體。我覺得我在做它正確根據文檔：更改谷歌條形圖上的字體

<!doctype html> 
<html> 
    <head> 
     <style> 
      @font-face { 
       font-family: bebas; 
       src: url(BebasNeue.otf); 
      } 
     </style> 
    </head> 
    <body> 
     <h1 style="font-family:bebas;">This font changed</h1> 
     <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script> 
       <div id="cheese_plot" style="width: 900px; height: 500px; font-family:bebas;"></div> 

     <script type="text/javascript"> 
      google.setOnLoadCallback(drawStuff); 

      var rawdata = [["Swiss", 90], 
       ["Cheddah", 75], 
       ["'Merican", 35], 
       ["Le bleu", 65], 
       ['Stinky', 70]]; 
      var labels = [['Cheese', 'Pieces']]; 

      var fullArray = labels.concat(rawdata); 

      function drawStuff() { 
       var data = new google.visualization.arrayToDataTable(
        fullArray 
       ); 



       var options = { 
        annotations: {textStyle: { fontName: 'bebas' }}, 
        hAxis: {textStyle: { fontName: 'bebas' }, titleTextStyle: { fontName: 'bebas' }}, 
        vAxis: {textStyle: { fontName: 'bebas' }, titleTextStyle: { fontName: 'bebas' }}, 
        titleTextStyle: { fontName: 'bebas' }, 
        tooltip: {textStyle: {fontName: 'bebas' }}, 
        fontName: 'bebas', 
        fontSize: 24, 
        title: 'Cheeseses', 
        width: 900, 
        legend: { position: 'none' }, 
        chart: { title: 'Cheese', 
        subtitle: 'pieces' }, 
        bars: 'horizontal', 
        axes: { 
        x: {0: { side: 'top', label: 'Pieces'}}}, 
        bar: { groupWidth: "90%" } 
       }; 

       var chart = new google.charts.Bar(document.getElementById('cheese_plot')); 
       chart.draw(data, google.charts.Bar.convertOptions(options)); 
       }; 
     </script> 
    </body> 
</html>

下面是文檔：https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=it#data-format

我試圖使用自定義字體我從這裏得到：http://www.dafont.com/bebas-neue.font

這是谷歌圖表錯誤，我做錯了什麼;這甚至有可能嗎？

來源

2015-10-31 wordsforthewise

這不是很有幫助，但你拼寫'芝士'。 – doublesharp

這是故意的。 – wordsforthewise

Then nevermind :) – doublesharp

材質圖表仍處於測試階段，所以convertOptions可能只是不適用於工具提示。改用CSS。

#cheese_plot text{ 
    font-family:'bebas' !important; 
}

編輯：工具提示嵌套在兩個<g>元素，而沒有其他text塊的是，這樣你就可以隔離提示CSS像這樣，如果你想：

#cheese_plot g g text{ 
    font-family:'bebas' !important; 
    fill:red !important; 
}

JSFiddle

來源

2015-11-02 18:29:43

不錯的工作，你如何能夠用嵌套的g來解決這個問題？查看chrome中開發人員工具窗口中的「元素」選項卡，當鼠標懸停在某個欄上時，可以看到添加了「g」元素，但我無法將該元素保留在那裏，因爲我將其展開（我的鼠標關閉後，'g'元素消失）。 – wordsforthewise

因此，工具提示總是很難找到，但通常您可以通過切換它們來查看它們的創建位置。我只是讓我的鼠標懸停並使用我的鍵盤導航和擴展元素。 –

我明白了。我只注意到另一個問題：工具提示文本週圍的框不會更改大小，因此它不適合不同類型的文本。 – wordsforthewise

更改谷歌條形圖上的字體

回答

相關問題