勉強したことのメモ

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

  関連記事

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法

PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...

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

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

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...