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

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

アプリ

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

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

【過去記事はこちら】

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

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

【Plotly.js】棒グラフのシンプルなデモ【サンプルコードあり】

今回は、Plotly.jsでの棒グラフのシンプルなデモを紹介します。 Plotly.jsを使うと、次のような棒グラフを描くことができます。【Plotly.js】棒グラフのシンプルなデモ See the Pen […]

【Chart.js】棒グラフのシンプルなデモ【サンプルコードあり】

Chart.jsできれいなグラフを描きたいことってありますよね？この記事では、JavascriptのグラフライブラリのChart.jsを使って、棒グラフを描くデモを紹介します。 Chart.jsを使うと、次のような棒グラフを描くこ[…]

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

【デモ画面】

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

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】投稿をプレビュー、または、公開して見てみると、グラフが表示されます！