Использование пользовательских шрифтов при экспорте Google Chart в качестве изображения

Мы хотим использовать «Avenir» в наших графиках Google. Это не проблема при использовании диаграмм на веб-странице, как вы можете видеть здесь . Мы можем просто изменить шрифт после создания диаграммы с помощью CSS:

@font-face 
{
    font-family: 'avenir';
    src: url('../fonts/avenir.woff2');
}

svg text
{
    font-family: 'avenir' !important;
}

Проблема в том, что мы хотим сохранить диаграмму в качестве изображения после ее создания и использовать ее в PDF-файле, который мы создаем. Для сохранения диаграммы мы используем функцию getImageURI () , но в сохраненном изображении используется шрифт по умолчанию (Arial), как вы можете видеть здесь .

Кто-нибудь знает, можно ли использовать настраиваемый шрифт при настройке Google Chart, например, как Arial устанавливается в примере ниже?

var oOptions = 
{
    vAxis: 
    {
        textStyle:  
        {
            color: '#2a292e',
            fontName: 'Arial',
            fontSize: 24
        }
    }
}

Заранее спасибо!

image,pdf,charts,fonts,google-chartwrapper,

1

Ответов: 1


0 принят

вместо применения css к элементам диаграммы, добавьте в fontNameпараметры диаграммы

это переведет изображение

следующий рабочий фрагмент использует пользовательский шрифт из Google

из сборщика шрифтов Google ...

<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">

Укажите в CSS.
Для определения этих семейств используйте следующие правила CSS:

font-family: 'Bahiana', cursive;

в параметрах диаграммы fontNameзадано как ...

fontName: "'Bahiana', cursive"


google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
     'Western', 'Literature', { role: 'annotation' } ],
    ['2010', 10, 24, 20, 32, 18, 5, ''],
    ['2020', 16, 22, 23, 30, 16, 9, ''],
    ['2030', 28, 19, 29, 30, 12, 13, '']
  ]);

  var options = {
    width: 800,
    height: 600,
    bar: { groupWidth: '75%' },
    isStacked: true,

    legend: {
      position: 'top',
      maxLines: 3,
      textStyle: {
        color: '#2a292e',
        fontName: "'Bahiana', cursive",
        fontSize: 40
      }
    },
    hAxis:  {
      textStyle: {
        color: '#2a292e',
        fontName: "'Bahiana', cursive",
        fontSize: 24
      }
    },
    vAxis:  {
      textStyle: {
        color: '#2a292e',
        fontName: "'Bahiana', cursive",
        fontSize: 24
      }
    }
  };


  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
  });

  chart.draw(data, options);
};
div {
  padding: 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bahiana">
<div>CHART</div>
<div id="chart_div"></div>
<div>IMAGE</div>
<div id="image_div"></div>

изображения, PDF, графики, шрифты, Google-chartwrapper,
Похожие вопросы