highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
2014/05/19
やりたかった事は、
・棒グラフと折れ線グラフを入れたい
・Y軸はそれぞれ違う値にしたい
というもの。
$(function () {
$('#container').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: [棒グラフの値をカンマ区切りで入れる],
type: 'column', //column->棒グラフ,line->折れ線グラフ
color : '#d1a4ff' //棒グラフの色
}, {
name: '折れ線グラフのタイトル',
data: [折れ線グラフの値をカンマ区切りで入れる],
type: 'line', //column->棒グラフ,line->折れ線グラフ
yAxis: 1
}],
credits: {
enabled: false
}
});
});
■その他
呼び出し順はjQuery->highchartsの順!
関連記事
-
Dexie.jsを利用してIndexedDBを取り扱う方法
IndexedDBを用いて色々するという案件を見かけたが、そもそもIndexed ...
-
javascriptの注意点
javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
JavaScriptでフォーム送信の際に禁止ワードのチェック及び制限をかける方法
掲示板等で本文を送信する際に予め定めていた禁止ワードが含まれていないかチェックし ...
-
javascriptでランダム英数字
やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...