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>
関連記事
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
JavaScriptで全角半角を判別の上で文字数カウントを行う
やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...
-
-
CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法
CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...