更改谷歌条形图上的字体答案

【问题标题】：Change font on google bar chart更改谷歌条形图上的字体
【发布时间】：2015-10-31 17:23:57
【问题描述】：

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

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

这是一个谷歌图表错误，我做错了什么吗？这甚至可能吗？

【问题讨论】：

并不是说它很有帮助，但你拼错了Cheeseses。
那是故意的。
只是为了确认，该字体被用于图表中的所有元素除了工具提示？
字体已成功更改，但工具提示除外。我希望对包括工具提示在内的所有内容进行更改。
我已确定您可以设置工具提示字体，但尚未将其应用到您的示例中。

标签： javascript charts fonts google-visualization

【解决方案1】：

材料图表仍处于测试阶段，因此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

【讨论】：

干得好，你是怎么用嵌套的 g 解决这个问题的？在 chrome 中查看开发人员工具窗口中的“元素”选项卡，当我将鼠标悬停在条上时，我可以看到添加了一个“g”元素，但是当我移动到展开它时，我无法将元素保留在那里（鼠标关闭后，“g”元素消失）。
工具提示总是很难找到，但您通常可以通过打开和关闭它们来查看它们的创建位置。我只是保持鼠标悬停并使用键盘导航并展开元素。
我明白了。我刚刚注意到另一个问题：工具提示文本周围的框没有改变大小，因此它不能正确适应不同类型的文本。
您可能需要手动调整填充设置或字体大小，但如果您查看更新后的小提琴here，它肯定会调整大小。