勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

   2014/05/19  JavaScript

やりたかった事は、

・棒グラフと折れ線グラフを入れたい
・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

  関連記事

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQuery Nice Selectを特定ページのみ無効にする方法

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...