勉強したことのメモ

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

  関連記事

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

javascript_logo_unofficial-300x300
lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

javascript_logo_unofficial-300x300
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

javascript_logo_unofficial-300x300
複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

mzl.qobqfuxq
GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

110126-HTML5_Logo
HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

javascript_logo_unofficial-300x300
javascriptで論理和演算子の特殊な使い方

論理和「||」の特殊な使い方を教わったのでメモ。 普段使うのは、 if (a = ...

mzl.qobqfuxq
GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...

javascript_logo_unofficial-300x300
javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...