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>
関連記事
-
-
郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法
お問い合わせフォームのようなページで郵便番号及び住所欄がある場合、ユーザーが郵便 ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
formのpasswordとtextをjQueryで切り替える方法
formでtype="password"を指定していると内容を入力した際に「●● ...
-
-
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...