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>
関連記事
-
-
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...
-
-
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...
-
-
JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法
お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部 ...