勉強したことのメモ

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

  関連記事

セレクトメニューにサジェスト機能をつける方法(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法

お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部 ...