Highcharts | 高性能チャート作成 | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Highchartsについての解説

Highchartsについての解説

Highchartsは、さまざまな種類のチャートを簡単に作成できる、非常に人気の高いJavaScriptライブラリです。折れ線グラフ、棒グラフ、円グラフ、面グラフなど、インタラクティブなチャートを動的に生成するための強力な機能を提供しています。視覚化が容易なため、データ分析やビジュアルプレゼンテーションに最適です。

Highchartsの実装方法

Highchartsを使用するには、以下のスクリプトを<head>内に記述してライブラリを読み込みます。

<script src="https://code.highcharts.com/highcharts.js"></script>

Highchartsの特徴

特徴	説明
豊富なチャートタイプ	折れ線、棒、円、面など、多彩なチャートを簡単に作成可能。
高いインタラクティビティ	チャート上でズームやホバーなどの操作が可能。
カスタマイズ性	各チャート要素を詳細にカスタマイズできる。
モバイル対応	レスポンシブデザインに対応し、モバイルデバイスでも利用可能。

プロパティとその値の一覧表

プロパティ名	説明	値の例
chart.type	作成するチャートの種類を指定。	‘line’, ‘bar’, ‘pie’, ‘area’
title.text	チャートのタイトルを設定。	‘売上グラフ’, ‘人口ランキング’
xAxis.categories	X軸に表示するカテゴリーのリスト。	[‘1月’, ‘2月’, ‘3月’]
series.data	チャートに表示するデータセット。	[10, 20, 30, 40]

折れ線グラフを作成する例

実行例

HTMLとJavaScriptコード

<div id="line-chart"></div>

<script>
Highcharts.chart('line-chart', {
    chart: { type: 'line' },
    title: { text: '月ごとの気温変化' },
    xAxis: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: { title: { text: '温度 (°C)' } },
    series: [{
        name: '東京',
        data: [5.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'ニューヨーク',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }]
});
</script>

解説

この例では、折れ線グラフを作成しています。`chart.type`でチャートの種類を指定し、`xAxis.categories`でX軸に表示する月を設定しています。`series.data`には東京とニューヨークの月ごとの気温データを渡しています。

円グラフを作成する例

実行例

HTMLとJavaScriptコード

<div id="pie-chart"></div>

<script>
Highcharts.chart('pie-chart', {
    chart: { type: 'pie' },
    title: { text: '2024年ブラウザシェア' },
    series: [{
        name: 'ブラウザシェア',
        data: [
            { name: 'Chrome', y: 65.0 },
            { name: 'Firefox', y: 12.5 },
            { name: 'Safari', y: 10.0 },
            { name: 'Edge', y: 7.5 },
            { name: 'その他', y: 5.0 }
        ]
    }]
});
</script>

解説

この例では、2024年のブラウザシェアを円グラフで表示しています。`series.data`には、各ブラウザとそのシェアをオブジェクト形式で渡しています。

棒グラフを作成する例

実行例

HTMLとJavaScriptコード

<div id="bar-chart"></div>

<script>
Highcharts.chart('bar-chart', {
    chart: { type: 'bar' },
    title: { text: '世界の人口ランキング' },
    xAxis: { categories: ['中国', 'インド', 'アメリカ', 'インドネシア', 'パキスタン'] },
    yAxis: { title: { text: '人口 (億人)' } },
    series: [{
        name: '2024年',
        data: [14.0, 13.8, 3.2, 2.7, 2.1]
    }]
});
</script>

解説

この例では、世界の人口ランキングを棒グラフで表示しています。`xAxis.categories`には国名、`series.data`にはそれぞれの国の人口データを渡しています。

面グラフを作成する例

実行例

HTMLとJavaScriptコード

<div id="area-chart"></div>

<script>
Highcharts.chart('area-chart', {
    chart: { type: 'area' },
    title: { text: '過去10年の売上成長' },
    xAxis: { categories: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'] },
    yAxis: { title: { text: '売上 (百万ドル)' } },
    series: [{
        name: '売上',
        data: [100, 120, 130, 150, 170, 190, 210, 230, 250, 280]
    }]
});
</script>