0

我一直在做一个使用 google-chart、google-fonts 和 awesome-fonts API 的应用程序。我的主要字体来自 google-fonts，我将它们包含在<head>标签中，以及 awesome-fonts。

但是，当我使用 google-charts 时，加载图表后似乎会刷新字体。通过刷新，我的意思是，它们似乎会在一秒钟内消失并重新加载。这使我的应用程序看起来很奇怪。我不喜欢它，我不确定 google-charts 是否会产生这种效果。

这是我加载谷歌图表的代码片段；

<script type="text/javascript">    
  google.load("visualization", "1", {packages:["corechart"]});

  function drawChart() {

      var best_letters_data = google.visualization.arrayToDataTable(
          JSON.parse('{{ best_letters|safe }}')
      );

      var worst_letters_data = google.visualization.arrayToDataTable(
          JSON.parse('{{ worst_letters|safe }}')
      );

      var best_letters_options = {
          title: 'Top Rated Hiragana Letters',
          width: 450,
          height: 240,
          isHtml: true,
          hAxis: {title: 'Letters', titleTextStyle: {color: 'red'}}
      };

      var worst_letters_options = {
          title: 'Worst Rated Hiragana Letters',
          width: 450,
          height: 240,
          isHtml: true,
          hAxis: {title: 'Letters', titleTextStyle: {color: 'red'}}
      };

      var best_letters_chart = new google.visualization.ColumnChart(document.getElementById('best_letters_div'));
      best_letters_chart.draw(best_letters_data, best_letters_options);

      var worst_letters_chart = new google.visualization.ColumnChart(document.getElementById('worst_letters_div'));
      worst_letters_chart.draw(worst_letters_data, worst_letters_options);

      $("#loader").hide();

  }
  google.setOnLoadCallback(drawChart);
</script>

如果我评论绘制图表的线条 (best_letters_chart.draw(best_letters_data, best_letters_options);和worst_letters_chart.draw(worst_letters_data, worst_letters_options);)，我的字体会被渲染一次，但是这次图表不会显示。

为什么会这样？我对此很好奇。如果有人有任何想法，请告诉我。

提前致谢。

4

0 回答 0