【WordPress】Hightchartsでブログにヒストグラムを描く方法【デモあり】

WordPressでマウスオーバーでツールチップ表示されるクオリティの高いグラフを描きたいことってありますよね?

過去記事で、jsグラフライブラリのGoogle Chartやchart.jsを紹介しましたが、今回はHightchartsを使って、WordPressのブログ上にグラフを描く方法を解説します。

 

【過去記事はこちら】

関連記事

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

関連記事

WordPressできれいな棒グラフを描きたいことってありますよね? 前回は、Javascriptのグラフライブラリchart.jsを紹介しましたが、今回は同様にJavascriptのグラフライブラリのplotly.jsを使って、Wo[…]

関連記事

WordPressできれいなグラフを描きたいことってありますよね? この記事では、Javascriptのグラフライブラリのchart.jsを使って、WordPressのブログ上に棒グラフを描く方法を解説します。 結論、プラグイン[…]

 

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

 

【デモ画面】

 

Highchartsでブログにグラフを描く方法

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

 

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

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
  window.onload = function() {
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      series: [{
        name: '東京',
        data: [14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9]
      }, {
        name: '大阪',
        data: [8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9]
      }]
    });
  }
</script>

 

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

 

以上で完了です。

Highchartsのグラフ作成で参考にしたサイト

以下のサイトの解説を参考にさせていただきました。
よろしければ、こちらのサイトも見ていただくとコードの内容がより分かると思います。
日々の覚書…日常のことも少しだけ

会社のシステムでグラフ表示させたいことがあって PHPでグラフを作成も考えたのですが 実装が簡単そうな「Hig……

まとめ

この記事では、WordPressでHighchartsを使って棒グラフ(ヒストグラム)を描画する方法を解説しました。

みなさんもhightchartsを使って、パパっとクオリティの高いグラフを作ってみてはいかがでしょうか。

 

最後まで読んでいただき、ありがとうございます。
今回は以上です。