とりぷるぷぅ技術メモ: [Highcharts]csvファイルからデータを取り込んで表示するグラフ

2013年1月14日月曜日

[Highcharts]csvファイルからデータを取り込んで表示するグラフ

ソースコード

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Highcharts example 02</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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">
 $(document).ready(function() {
 var options = {
   chart: {
     renderTo: 'container',
     defaultSeriesType: 'line',
   },
   title: {
     text: '月平均気温'
   },
   xAxis: {
     categories: []
   },
   yAxis: {
     title: {
       text: '気温 (℃)'
     },
     plotLines: [
       {
         value: 0,
         width: 2,
         color: 'red'
       }
     ]
   },
   series: []
 }

 $.get('sample02.csv', function(data) {
   // Split the lines
   var lines = data.split('\n');

   // Iterate over the lines and add categories or series
   $.each(lines, function(lineNo, line) {
   var items = line.split(',');

   // header line contains categories
   if (lineNo == 0) {
     $.each(items, function(itemNo, item) {
     if (itemNo > 0) options.xAxis.categories.push(item);
   });
 }
 // the rest of the lines contain data with their name in the first position
 else {
   var series = {
   data: []
 };
 $.each(items, function(itemNo, item) {
   if (itemNo == 0) {
     series.name = item;
   }
   else {
     series.data.push(parseFloat(item));
   }
 });
 
 options.series.push(series);
 }
 });
 
 // Create the chart
 var chart = new Highcharts.Chart(options);
 });
 });
 </script>
 </head>
 <body>
 <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
 </body>
</html>

データファイル

Categories,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
Tokyo,5.1,7.0,8.1,14.5,18.5,22.8,27.3,27.5,25.1,19.5,14.9,7.5
Osaka,4.4,7.4,8.1,13.8,19.6,24.2,27.8,28.9,25.2,19.5,15.2,8.1
Sapporo,-3.8,-1.1,0.7,6.9,11.1,17.3,21.8,26.6,19.2,12.1,6,-2
Naha,14.9,17.6,17.1,20.4,23.9,27.9,28.9,28.3,27.9,25.2,23.7,18.6

出力結果
sample02 (fc2 に置いてあるテストページに飛びます)

11 件のコメント:

あん2015年6月9日 16:37
たびたびすみません。
こちらのフォルダ構成も

以下の様なフォルダ構成になっていますか？
+-- js/
| +-- adapters/
| +-- modules/
| +-- themes/
| +-- highcharts.js
| +-- highcharts.src.js
+-- test/
+-- highcharts1.html
+-- highcharts1.js
+-- sample02.csv

という構成で動きますか？
返信削除
返信
あん2015年6月12日 9:36
こんにちは。htmlﾌｧｲﾙを変えているのとtestフォルダは無く、highcharts1.jsを入れていない以外は同じ構成にしてるんですが、画面が真っ白になるのですが、、これはどうしてでしょうか？
ﾌｧｲﾙが読み込めていない感じかもしれませんが・・・。

csvﾌｧｲﾙはSJIS?UTF-8? LFで保存とか何か決まりはありますか？
返信削除
返信
あん2015年6月30日 17:29
返事が遅くなりました。
ありがとうございます。
IE9では動作してIE10では動かなかった見たいです。
じっさいにはIE６で動作させたいのですが、可能なのでしょうか？
どこかで泊まっているようでした。。。

firefox検討してみます。
返信削除
返信
あん2015年7月2日 17:23
なるほど。。。そうなんですね。。。環境的にIE6を使ってる（ネット環境ではないので）ため、、、XP+IE6なんです。XPで最大IE7くらいまでいけたかどうかを調べてXPで利用できるIEを最大にして試してみたいと思います。
ありがとうございました。
返信削除
返信
あん2015年8月25日 15:59
こんにちは。お久しぶりです。
グラフについて教えていただきありがとうございます。

２つさらに教えていただきたいことが出てきましたので質問させていただきたいと思います。

【質問１】
　html中にあるグラフタイトルを表示するための記述
　title:{ text: 'xxxxxxxxxx'},　
　という部分があると思いますが、このxxxxxを参照しているフォルダ名を取得してセットしたいのですが、これは可能なのでしょうか？

　例にtestフォルダの下にhighcharts1.htmlが存在しているとします。
　このhighcharts1.htmlを開くとtitleに「test」が入るようにしたいのです。

【質問２】
　今このサンプルは折れ線グラフですが、これを積み上げグラフで表示するためにはどこを変更したら良いんでしょうか？

単純な質問なのかもしれませんが、ご教授のほどよろしくお願いいたします。
返信削除
返信
あん2015年8月31日 9:28
おはようございます。
早速の回答ありがとうございます。

早速試してみたいと思います。
ありがとうございました。
返信削除
返信

コメントを追加