【WordPress】Google Chartでブログに折れ線グラフを描く方法【デモあり】

2022-03-07
2022-10-02
アプリ

アプリ

WordPressでGoogle Chartを使ってスマートな折れ線グラフを描きたいことってありますよね？

過去記事で、Google Chartで棒グラフを描く方法を紹介しましたが、今回はGoogle Chartを使って、WordPressのブログ上に折れ線グラフを描く方法を解説します。

【過去記事はこちら】

【WordPress】Google Chartでブログに棒グラフを描く方法【デモあり】

WordPressでクールでスマートなグラフを描きたいことってありますよね？過去記事で、Javascriptのグラフライブラリchart.jsやplotly.jsを紹介しましたが、今回はGoogle Chartを使って、WordPr[…]

結論、Google Chartを使うと、特にWordPressのプラグイン無しで、次のような折れ線グラフを描くことができます。

【デモ画面】

1 Google Chartでブログに折れ線グラフを描く方法
2 Google Chartのグラフ作成で参考にしたサイト
3 まとめ

Google Chartでブログに折れ線グラフを描く方法

【手順1】WordPressの　投稿を編集　画面で、テキストエディタを開く。

【手順2】以下のコードを記述します。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart1);
  function drawChart1() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '月');
    data.addColumn('number', 'Blue');
    data.addRows([
      ['4月', 40],
      ['5月', 310],
      ['6月', 20],
      ['7月', 200],
      ['8月', 300],
      ['9月', 40],
      ['10月', 220],
      ['11月', 100],
      ['12月', 200],
      ['1月', 60]
    ]);
    var options = {
      'title':'サンプルグラフ1',
      'height':400
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="width:100%"></div>

【手順3】投稿をプレビュー、または、公開して見てみると、グラフが表示されます！