更改谷歌条形图上的字体

我正在尝试更改谷歌条形图上所有内容的字体。它适用于除了工具提示之外的所有内容。至少，我认为它被称为工具提示 - 它是您将鼠标悬停在栏上时显示的字体。我觉得我在做它正确根据文档：更改谷歌条形图上的字体

<!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

更改谷歌条形图上的字体

回答

相关问题