簡単にグラフを作成できるHighchartsの基本的な使い方

Highchartsとは？

SVGベースのグラフ、チャート用ライブラリです。

ライセンス

個人サイトや教育サイト、非営利組織は無料で利用可能です。
ライセンスの詳細は、こちらから。

インストール

<script src="https://code.highcharts.com/highcharts.js"></script>
<!--[if lt IE 9]>
<script src="https://code.highcharts.com/modules/oldie.js"></script>
<![endif]-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

例

折れ線グラフ

<div id="container" style="width:100%; height:300px;"></div>

<script>
$(function() {
  Highcharts.chart('container', {
    title: {
      text: '生鮮果実1人1年当たりの購入数量'
    },
    xAxis: {
      categories: [ '平成10年', '平成15年', '平成20年' ]
    },
    yAxis: {
      title: {
        text: 'kg'
      }
    },
    series: [
      {
        name: 'みかん',
        data: [ 6.3, 5.6, 4.8 ]
      }, {
        name: 'りんご',
        data: [ 4.8, 4.6 , 4.4 ]
      }, {
        name: 'バナナ',
        data: [ 4.6, 5.4, 6.4 ]
      }
    ]
  });
});
</script>

縦棒グラフ

<div id="container" style="width:100%; height:300px;"></div>

<script>
$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '生鮮果実1人１年当たりの購入数量'
    },
    xAxis: {
      categories: [ '平成10年', '平成15年', '平成20年' ]
    },
    yAxis: {
      title: {
        text: 'kg'
      }
    },
    series: [
      {
        name: 'みかん',
        data: [ 6.3, 5.6, 4.8 ]
      }, {
        name: 'りんご',
        data: [ 4.8, 4.6 , 4.4 ]
      }, {
        name: 'バナナ',
        data: [ 4.6, 5.4, 6.4 ]
      }
    ]
  });
});
</script>

円グラフ

<div id="container" style="width:100%; height:300px;"></div>

<script>
$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'pie'
    },
    title: {
      text: 'よく食べる果物'
    },
    tooltip: {
      pointFormat: '{series.name}: {point.percentage:.1f}%'
    },
    series: [{
      name: '果物',
      data: [
        {
          name: 'みかん',
          y: 33.1
        }, {
          name: 'りんご',
          y: 50.5
        }, {
          name: 'バナナ',
          y: 64.0
        }
      ]
    }]
  });
});
</script>