テスターですが何か?

ホビープログラマ略してHPです

Highchartsを使ってみた(2) 簡単なサンプルの作成

leave a comment »

前回のエントリーではhighchatsの簡単な紹介で終わりました。今回のエントリーでは、実際にサンプル(簡単な折れ線グラフ)を作成したいと思います。highchartsのサイトのデモページにある「Basicline」を参考に作っていきます。

(1) highchartsのインストール

ダウンロードページから「Highcharts-X.X.X.zip」をダウンロードし、解凍します。改装してできた「highcharts.js」をWebページから参照しやすい場所に配置します。自分はVisual Studioを使ってASP.NETプロジェクトで作成するので、Scriptsフォルダに配置しました。

(2) 空白のグラフの表示

まずは空白のグラフ(枠のみ)を表示してみます。コードはこのようになります。グラフの表示場所を<div>タグで準備し、javascript内のrenderToで表示場所を指定します。グラフタイプはdefaultSeriesTypeで折れ線グラフ(line)を指定しています。

<!DOCTYPE html>

<html>

<head>

    <title>Sample1</title>

    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

    <script src="Scripts/highcharts.js" type="text/javascript"></script>

    <script type="text/javascript">

        var chart;

        $(document).ready(function () {

            chart = new Highcharts.Chart({

                chart: {

                    renderTo: ‘container’,

                    defaultSeriesType: ‘line’,

                    marginRight: 0,

                    marginBottom: 0

                },

                title: {

                },

                subtitle: {

                },

                xAxis: {

                },

                yAxis: {

                },

                tooltip: {

                },

                legend: {

                },

                series: [{

                }]

            });

        });

    </script>

</head>

<body>

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>

</html>

 

ブラウザで表示するとこのようになります。まだ何も指定していないので、そっけないのは仕方ないですね。

image

(3) タイトル、X軸、Y軸の指定

次に、グラフのタイトル・X軸・Y軸の指定を行なっていきます。まずはコードです(javascript部分のみを抜粋しています)

    <script type="text/javascript">

        var chart;

        $(document).ready(function () {

            chart = new Highcharts.Chart({

                chart: {

                    renderTo: ‘container’,

                    defaultSeriesType: ‘line’,

                    marginRight: 130,

                    marginBottom: 30

                },

                title: {

                    text: 時刻別節電達成率

                },

                subtitle: {

                    text: ‘2011XXYY

                },

                xAxis: {

                    title: {

                        text:

                    }

                },

                yAxis: {

                    title: {

                        text: 節電率(%)’

                    }

                },

                tooltip: {

                },

                legend: {

                    layout: ‘vertical’,

                    align: ‘right’,

                    verticalAlign: ‘top’

                },

                series: [{

                }]

            });

        });

    </script>

 

ChartsControlの知識が役に立ちますね。xAxis, yAxis, legendの用語はどちらにも出てきますし。ポイントの解説です。

  • chart
    • marginRight, marginBottom: これを指定しないと右上のlegend(Series1の見出し)、X軸のラベルが表示されません。
  • legend: 右上にある「Series1」の値見出しです。

ブラウザで表示させると以下のようになります。だんだんグラフっぽくなってきましたね。次はここに値を設定します。

image

(4) 値の設定

グラフの枠ができたので、値を設定していきます。空欄だったseriesの部分にXY軸の値を指定して埋めてきます。コードです。(長くなるのでseries部分のみを抜粋)

series: [{

name: 前年比節電率,

data: [[0, 11.4], [1, 10.8], [2, 9.6], [3, 8.6], [4, 7.5], [5, 5.3], [6, 2.2], [7, 0.2], [8, -3.5], [9, -4.8], [10, -4.1],

[11, -5.0], [12, -2.7], [13, -6.7], [14, -9.5], [15, -9.5], [16, -7.8], [17, -3.2], [18, 1.0], [19, 3.6], [20, 4.2],

 [21, 4.0], [22, 0.0], [23, 0.0]]

}]

 

コードが見づらいので解説すると、[]で囲んでXY軸の値を指定します。(例[0, 11.4])そしてカンマでつないでいきます。

ブラウザで表示します。キレイなグラフになりましたね。あともう一息変更を加えていきます。

image

(5) tooltipの設定

デフォルトでtooltipが設定されているため、グラフの部分にマウスカーソルを乗せると値が自動的に表示されます。ただ、このような表示ではちょっとアレなので、カスタマイズしていきます。

image

tooltip部分にformatterを指定して表示させたい文字列を設定します。

tooltip: {

formatter: function () {

return ‘<b>’ + this.series.name + ‘</b><br/>’ +

this.x + : ‘ + this.y + ‘%’;

}

そしてブラウザの表示です。ハイ、完璧です。

image

今回はここまでです、今回作成したソースはこちらにアップしておきます。「HighchartsSample1.zip」をダウンロードして下さい。

次回はもう少し複雑なグラフを作っていきます。

Written by david9142

2012年1月22日 @ 4:50 PM

カテゴリー: Highcharts

Tagged with , ,

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。