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 / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法
サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
leaflet.jsとOSMでマップ表示及びマーカー設置方法
GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...
-
-
Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法
LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリ ...