コンテンツにスキップ

Highcharts JavaScriptグラフ描画ライブラリ

Highcharts
JavaScriptの高機能なグラフライブラリ
個人で利用する範囲であれば無料で使える
Demoにて様々なグラフを参照可能

Usage

  1. CDNを読み込む 

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

  2. チャートを表示する場所を用意 

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

  3. JavaScriptを書く 

    <script>
    document.addEventListener('DOMContentLoaded', function () {
    const chart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});
</script>
    これだけでインタラクティブなグラフが表示される
    chart

株価チャートで実装する場合も簡単にできる

Reference

Your first chart
jsfiddle