はじめに
HighchartsでCSVファイルからXY軸のラベルとデータ名称を読み取るようにしました。
動作環境1
- jQuery ver.1.7
- Highcharts ver.2.1.9
- jquery.csv.js ver.1.0
- jquery.csv.js ver.1.0 改造版
動作確認2
IE以外はローカルでは動作しなかった。
- WindowsXP Pro SP3 32bit
- Mozila Firefox ver.9.0
- Opera ver.11.60
- Safari v.5.1.1
- Google Chrome v.16.0.912.63
- IE 8.0.6001.18702
- IE7(IETester v.0.4.11)
- IE6(IETester v.0.4.11)
サンプルデータ
適当に作ったものです。
highchart2.zip
グラフのサンプル
必要なファイル
- jquery-min.js(Googleで検索)
- Highcharts(「js」ディレクトリを使う。)
- サンプルデータ(カンマ、又はタブ区切り)(上記)
- jquery.csv.js(Googleで検索)
- mydata.js(下記)
- XHTMLファイル(下記)
Highcharts
Highcharts - Interactive Charting Library for Developers
Create interactive data visualization for web and mobile projects with Highcharts core, Highcharts S...
JQuery
jQuery
jQuery: The Write Less, Do More, JavaScript Library
html
UTF-8で保存。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Graph</title> <script src="./jquery.min.js" type="text/javascript"></script> <script src="./js/highcharts.js" type="text/javascript"></script> <script src="./js/modules/exporting.js" type="text/javascript"></script> <!-- <script src="./js/themes/gray.js" type="text/javascript" ></script> --> <script src="./jquery.csv.js" type="text/javascript"></script> <script src="./mydata.js" type="text/javascript"></script> </head> <body> <h1>Highcharts Graph</h1> <div id="container" style="width: 100%; height: 400px"></div> </body> </html>
mydata.js
UTF-8で保存。
「jquery.csv.js」は改行コードを指定出来るように改造したものを使っています。
CSVデータは4列と仮定している。
1行目はXY軸のラベル。
2行目は各データ名称。
データは3行目から始まる。
データ1は、1列目と2列目で、1列目がX軸データ、2列目がY軸データ。
データ2は、3列目と4列目で、3列目がX軸データ、4列目がY軸データ。
$.get('data.txt', function( data ) { var mydata1 = []; var mydata2 = []; var label_x = ''; var label_y = ''; var item_1 = ''; var item_2 = ''; var csv = $.csv("\t", "\n")( data ); // modified jquery.csv.js // var csv = $.csv("\t")( data ); // original jquery.csv.js // read csv file $( csv ).each( function( i ) { // 1行目 ラベル if ( i == 0 && isNaN( this[0] ) ) { label_x = this[0]; label_y = this[1]; // alert( label_x ); // alert( label_y ); return; } // 2行目 各アイテム名称 if ( i == 1 && isNaN( this[1] ) ) { item_1 = this[1]; item_2 = this[2]; return; } // 3行目以下、データ mydata1.push( [parseFloat( this[0] ), parseFloat( this[1] )] ); mydata2.push( [parseFloat( this[2] ), parseFloat( this[3] )] ); }); // alert( mydata1[ 1 ] ); // alert( mydata2[ 1 ] ); // Highcharts option var options = { // CSV data series: [ { data: mydata1, // data: [[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]], name: item_1, color: 'rgba(223, 83, 83, .5)' }, { data: mydata2, name: item_2, color: 'rgba(119, 152, 191, .5)' } ], chart: { renderTo: 'container', // The same name written in HTML files defaultSeriesType: 'scatter', zoomType: 'xy' }, title: { text: 'Highcharts Test' }, subtitle: { text: 'hogehoge' }, xAxis: { title: { enabled: true, text: label_x }, startOnTick: true, endOnTick: true, showLastLabel: true }, yAxis: { title: { text: label_y } }, tooltip: { formatter: function() { return ''+ this.x +' unit, '+ this.y +' ul'; } }, legend: { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, borderWidth: 1 }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } } } // Create the chart var chart = new Highcharts.Chart(options); });
created by Rinker
¥2,728
(2024/11/11 16:00:48時点 楽天市場調べ-詳細)
Comments