Изменить шрифт на гистограмме Google

Я пытаюсь изменить шрифт для всего на гистограмме Google. Он работает для всего, кроме всплывающей подсказки. По крайней мере, я думаю, что это называется всплывающей подсказкой - это шрифт, который отображается, когда вы наводите указатель мыши на панель. Я думаю, что я делаю это правильно в соответствии с Документами:Изменить шрифт на гистограмме Google

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

Является ли это ошибка в диаграммах Google, я делаю что-то неправильно; это даже возможно?

источник

2015-10-31 wordsforthewise

Не то, чтобы это было очень полезно, но вы ошибочно написали 'Cheeseses'. – doublesharp

Это было предназначено. – wordsforthewise

Then nevermind :) – doublesharp

Карты материалов по-прежнему находятся в состоянии бета-версии, поэтому convertOptions, вероятно, просто не работает для всплывающей подсказки. Вместо этого используйте CSS.

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

Edit: Всплывающие подсказки вложены в двух <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

Изменить шрифт на гистограмме Google

ответ

Смежные вопросы