Hatena::ブログ(Diary)

end0tknrのkipple - web写経開発 RSSフィード

2011-12-18

webアプリ(perlやjavascript)でグラフ表示なら、Highcharts で決まりかも

2013/6/23追記

www.fusioncharts.com によるグラフ・ライブラリの比較表を追加

http://www.fusioncharts.com/javascript-charting-comparison/

2014/11/7追記

amChartsというものを見つけました。詳しく見ていませんので、参考として

www.amcharts.com



http://d.hatena.ne.jp/end0tknr/20110514/1305359945

以前、perlで利用できるグラフ生成ツールを調べて見ましたが、moongiftで「IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ「Highcharts」が紹介されていたので、試しに使ってみました。

ライセンスが...という方は、canvasChart ( http://jsgt.org/c/ )も良さそうです。


http://www.moongift.jp/2011/12/20111213-2/

http://www.highcharts.com/

f:id:end0tknr:20120517124213p:image

www.moongift.jp や www.highcharts.com では様々なデモが提供されていますが、「これは無理だろ〜」と思っていた「積上げ + 折線」複合グラフも問題なく表示されました。


f:id:end0tknr:20111218200718p:image

こんな複雑なグラフを表示出来るだけでなく、ツールチップや印刷、画像ファイルとしてのexportにも対応しています。


f:id:end0tknr:20111218200717p:image

更に凡例部分をクリックすることで、対象データの表示/非表示を切り替えることもできます。


↓ここからは、私が書いたhtmljavascriptです

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/modules/exporting.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>

<body>
 <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            zoomType: 'xy'
        },
        title: { text: 'end0tknrのHighchartsテスト' },
        subtitle: { text: '積上グラフ + 折線グラフを表示したい' },
        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [
            { //Y軸 No.1
                labels: {
                    formatter: function() { return this.value +'°C'; },
                    style: { color: '#89A54E' } },
                title: {
                    text: '温度',
                    style: { color: '#89A54E' }},
                opposite: true //trueにすると,グラフの右側に表示
            },
            { //Y軸 No.2
                gridLineWidth: 0,
                title: {
                    text: '降水量',
                    style: { color: '#4572A7' } },
                labels: {
                    formatter: function() { return this.value +' mm'; },
                    style: { color: '#4572A7' } }
            },
            { //Y軸 No.3
                gridLineWidth: 0,
                title: {
                    text: '気圧',
                    style: { color: '#AA4643' } },
                labels: {
                    formatter: function() { return this.value +' mb'; },
                    style: { color: '#AA4643' } },
                opposite: true
            }
        ],
        tooltip: {
            formatter: function() {
                var unit = {
                    '降水量1': 'mm',
                    '降水量2': 'mm',
                    '降水量3': 'mm',
                    '気温': '°C',
                    '気圧': 'mb'
                }[this.series.name];
                return ''+ this.x +': '+ this.y +' '+ unit;
            }
        },
        plotOptions: {
            column: { stacking: 'normal' }
        },
        legend: { //凡例
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 80,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [
            {name: '降水量1',
             color: '#4572A7',
             type: 'column',
             yAxis: 1,
             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                    148.5, 216.4, 194.1, 95.6, 54.4],
             stack: 'group1'
            },
            {name: '降水量2',
             color: '#BAD1E6',
             type: 'column',
             yAxis: 1,
             data: [19.9, 41.5, 76.4, 99.2, 114.0, 146.0, 105.6,
                    118.5, 186.4, 164.1, 65.6, 24.4],
             stack: 'group1'
            },
            {name: '降水量3',
             color: '#F5F5F5',
             type: 'column',
             yAxis: 1,
             data: [39.9, 61.5, 96.4, 119.2, 134.0, 166.0, 125.6,
                    138.5, 206.4, 184.1, 85.6, 44.4],
             stack: 'group2'
            },
            {name: '気圧',
             type: 'spline',
             color: '#AA4643',
             yAxis: 2,
             data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6,
                    1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
             marker: { enabled: false },
             dashStyle: 'shortdot'					
            },
            {name: '気温',
             color: '#89A54E',
             type: 'spline',
             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3,
                    18.3, 13.9, 9.6]
            }
        ]
    });
});

多機能で、表現力もあり、日本語表示も問題なさそう...、webアプリでグラフ表示するなら、Highcharts で決まりかも。

no title

と、「jQuery Visualize」を推される方もいらっしゃるようですが、私はHighchartsかな

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

リンク元
Connection: close