0

私はgoogle-chart、google-fonts、awesome-fontsAPIを使用するアプリケーションを実行しています。私のメインフォントはgoogle-fontsからのもので、<head>タグ内にそれらとawesome-fontsを含めています。

ただし、google-chartsを使用すると、グラフが読み込まれた後にフォントが更新されるようです。更新とは、つまり、それらはすぐに消えてリロードするように見えるということです。これにより、私のアプリケーションは奇妙に見えます。私はそれが気に入らなかったし、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);、フォントが1回レンダリングされますが、今回はチャートが表示されません。

なぜこれが起こっているのですか？私はこれについてかなり興味があります。誰かが何か考えを持っているなら、私に知らせてください。

前もって感謝します。

4

0 に答える 0