highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
2024/05/22
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でWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...
-
-
JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)
JavaScriptでブラウザ幅によって異なる処理を行う場合、「window.a ...
-
-
構造化データ(JSON-LD形式)をJavaScriptで動的に描写する方法
あるサイトに構造化データをJSON-LD形式で出力させたかった。ただ、当該環境で ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...
-
-
JavaScriptにてHTML文字列をDOMノードに変換する方法
先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...