勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

   2024/05/22  JavaScript

highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違う値にしたい」を実現する方法をメモ。

 

サンプル

https://taitan916.info/sample/highcharts.js/mix/

 

ソースコード

<div id="graph"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@11.4.1/highcharts.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/highcharts@11.4.1/css/highcharts.min.css" rel="stylesheet">

<script>
$(function() {
    $('#graph').highcharts({
        title: {
            text: 'グラフ自体のタイトル'
        },
        xAxis: {
            categories: ["2012-11", "2012-12", "2013-01", "2013-02", "2013-03"]
        },
        yAxis: [{
            title: {
                text: '棒グラフのタイトル',
            },
            labels: {
                formatter: function() {
                    return this.value + 'pts'; //Y軸部分の表記
                }
            },
            min: 0
        }, {
            title: {
                text: '折れ線グラフのタイトル',
            },
            labels: {
                formatter: function() {
                    return this.value + '時間'; //Y軸部分の表記
                }
            },
            min: 0,
            opposite: true
        }],
        series: [{
            name: '棒グラフのタイトル',
            data: [1, 2, 5, 7, 10],
            type: 'column', //column->棒グラフ,line->折れ線グラフ
            color: '#d1a4ff' //棒グラフの色
        }, {
            name: '折れ線グラフのタイトル',
            data: [10, 3, 7, 9, 2],
            type: 'line', //column->棒グラフ,line->折れ線グラフ
            yAxis: 1
        }],
        credits: {
            enabled: false
        }
    });
});
</script>

 - JavaScript

  関連記事

日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

iPhoneにホーム画面登録を促すダイアログを表示

スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれど ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...