勉強したことのメモ

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でスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

table内のiframeのheightを最大高さにする

tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...

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

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

JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...