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>
関連記事
-
-
Leafletで「sidebar-v2」プラグインを導入してマップ上にサイドバーを設置する方法
Leafletでマップ上にサイドバー及びサイドメニューを実装したい。調べたところ ...
-
-
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...