勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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の順!

 - javascript

  関連記事

javascript_logo_unofficial-300x300
JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

javascript_logo_unofficial-300x300
javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

javascript_logo_unofficial-300x300
javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

javascript_logo_unofficial-300x300
JavaScriptで連想配列を数値でソート

数字の大きい順でソートしたかったんだけど、 色々調べてhash.sort云々やっ ...

javascript_logo_unofficial-300x300
JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

javascript_logo_unofficial-300x300
JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

javascript_logo_unofficial-300x300
JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

javascript_logo_unofficial-300x300
JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

javascript_logo_unofficial-300x300
alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...