勉強したことのメモ

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

  関連記事

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...