Question

我们想在Google Charts中使用'Avenir'。在网页as you can see here上使用图表时，这根本不是问题。我们可以在使用CSS生成图表后简单地更改字体：

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

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

问题是我们想要在生成图像后将其保存为图像，然后在我们生成的PDF中使用它。为了保存图表，我们使用函数 getImageURI（），但在保存的图像中使用了“默认”字体（Arial），as you can see here。

有人知道在设置Google图表时是否可以使用自定义字体，就像下面示例中设置Arial的方式一样？

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

提前致谢！

Answer 1

不是将css应用于图表元素，而是将fontName添加到图表选项

这将转换为图像

以下工作代码段使用谷歌的自定义字体

来自谷歌＆＃34;字体选择器＆＃34; ...

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

在CSS中指定   使用以下CSS规则指定这些系列：

font-family: 'Bahiana', cursive;

在图表选项中，fontName设置为...

fontName: "'Bahiana', cursive"

＆＃13;

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);
};

＆＃13;

div {
  padding: 4px;
}

＆＃13;

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

＆＃13;

导出Google Chart作为图像时使用自定义字体

1 个答案: