jQuery知識ゼロでも超簡単!!Highcharts.jsで折れ線グラフを描いてみました。

更新

2013-05-10_2017_yaxes先日Highcharts.jsを導入して以来「こんなに簡単にグラフが描けるとは」と感動しまくりな@web_shufuです。今回は、折れ線グラフを描いてみました。とても簡単です。

グラフを表示したい場所のhtmlコード

グラフを表示したい場所に以下のHTMLを書きます。

<div id="line"></div>

グラフを描くためのJquery

Highcharts.js利用の準備が終わっていれば、</body>のすぐ手前に次のようなコードがあるはずです。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='(highcharts.jsへのパスを書く)'></script>
<script>
‥‥(グラフを描くためのJqueryを書く)‥‥
</script>

「‥‥(グラフを描くためのJqueryを書く)‥‥」の部分には次のようなコードを書きます。

$(function () {
$('#line').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: '年度別売上高',
x:-20 //center
},
xAxis: {
categories: ['10', '11', '12', '13(予想)']
},
yAxis: {
title: {
text: '売上(億円)',
align: 'middle',
rotation: -90
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '億円'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -80,
y: 0,
borderWidth: 0
},
series: [{
name: 'A社',
data: [400,450,550,300]
}, {
name: 'B社',
data: [195,210,250,325]
}, {
name: 'C社',
data: [600,435,295,405]
}, {
name: 'D社',
data: [550,600,450,650]
}]
});
});

title

上のコードの中で

title: {
text: '年度別売上高',
x:-20 //center
},

の「text: ‘年度別売上高’」は以下の様にグラフの題名を表します。

2013-05-10_2017-title

「年度別売上高」の部分は自由に変えられますし、「text: ”」とすると題名無しになります。

xAxis

xAxis: {
categories: ['10', '11', '12', '13(予想)']
},

xAxisは、グラフの横軸に書くラベルを決めるところです。

2013-05-10_2017-xaxes

記事冒頭のグラフでは、categoriesに4ラベルしか設定していません。

しかし、ラベルを「’」で囲んで、ラベル同士を「,」で連結することで、categoriesのラベルはいくらでも増やせます。

yAxis

yAxis: {
title: {
text: '売上(億円)',
align: 'middle',
rotation: -90
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},

yAxisはグラフの縦軸に書くラベルの設定です。

「text: ‘売上(億円)’」で縦軸の数値の指す内容と単位を決めています。

2013-05-10_2017_yaxes

tooltip:

tooltip: {
valueSuffix: '億円'
},

valueSuffix:は折れ線にマウスオーバーしたときに表示される数値の後ろに付ける単位です。今回は売上(億円)が表示されるので’億円’です。

series:

series: [{
name: 'A社',
data: [400,450,550,300]
}, {
name: 'B社',
data: [195,210,250,325]
}, {
name: 'C社',
data: [600,435,295,405]
}, {
name: 'D社',
data: [550,600,450,650]
}]

name:で社名を決めて、data:で’10,’11,’12,’13の順に点数データを与えています。

今回社名は4社ですが、

{
name: '○○',
data: [○, ○, ○, ○]
}

を「,」で連結することで、いくらでも増やせます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です