在本教程中，我將用一個小小的例子演示如何從一個文件中加載和解析CSV數據。假如你使用的是amCharts的JavaScript/HTML5 Charts，并且不用下載包中的FlashOrJavaScript后備腳本，那么這篇教程將會給你一些啟發，同時還能幫助你更好的理解amCharts的JavaScript圖表。
準備數據文件
首先下載JavaScript/HTML5 Charts，由于這里我們不用flash圖表，復制 amcharts/javascript文件夾到你的工作目錄中，找到 basicSamples/javaScriptOnly文件夾并復制serial.html文件到這個文件夾下。用文本編輯器打開文件并修復JavaScript文件路徑，刪除路徑最開頭的../../amcharts/。如果用瀏覽器打開serial.html，你將會看到以下圖表：
圖表的數據放在html文件中，它不是基于日期的，所以我們來創建一個簡單的文本文件data.txt并添加一些數據到里頭，這些數據是不規則的：
2011-02-23,133034,12105.78
2011-02-24,122290,12068.50
2011-02-25,383603,12130.45
2011-02-28,125285,12226.34
2011-03-01,118042,12058.02
2011-03-02,102500,12066.80
2011-03-03,434047,12258.20
2011-03-04,422374,12169.88
2011-03-07,396473,12090.03
2011-03-08,453142,12214.38
將其保存為serial.html文件，然后回到文本編輯器打開這個文件。刪除chartData變量和它的所有數據，還有window.onload方法的所有內容。
加載數據
-
添加一個方法，加載外部數據到腳本中
-
添加復制的方法
-
當窗口加載時調用loadCSV函數
示例代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascript/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
window.onload = function() {
loadCSV("data.txt");
}
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load data. 'false' indicates that further script
// is not executed until data is loaded and parsed
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data){
alert(data);
}
</script>
</head>
<body style="background-color:#EEEEEE">
<div id="chartdiv" style="width:600px; height:400px; background-color:#FFFFFF"></div>
</body>
</html>
用瀏覽器打開serial.html文件，需要一個彈出菜單打開所有數據，但這里還沒有實現。加載外部數據需要所有的文件放在web服務器上，如果你簡單的從硬盤中打開文件，這個腳本不會運行。這意味著必須將所有的文件都上傳到網站上。或者在計算機上安裝Web服務器，將所有的文件放到本地主機文件夾中，然后在本地查看頁面。
注意，數據文件可以是動態的，這意味著你可以用php,asp或者其他腳本加載數據。
解析數據
在腳本頂部聲明dataProvider變量，下面是加載和解析數據的完整腳本：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascript/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var dataProvider;
window.onload = function() {
loadCSV("data.txt");
}
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data){
//replace UNIX new lines
data = data.replace (/\r\n/g, "\n");
//replace MAC new lines
data = data.replace (/\r/g, "\n");
//split into rows
var rows = data.split("\n");
// create array which will hold our data:
dataProvider = [];
// loop through all rows
for (var i = 0; i < rows.length; i++){
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
// column is array now
// first item is date
var date = column[0];
// second item is value of the second column
var value1 = column[1];
// third item is value of the fird column
var value2 = column[2];
// create object which contains all these items:
var dataObject = {date:date, value1:value1, value2:value2};
// add object to dataProvider array
dataProvider.push(dataObject);
}
}
}
</script>
</head>
<body style="background-color:#EEEEEE">
<div id="chartdiv" style="width:600px; height:400px; background-color:#FFFFFF"></div>
</body>
</html>
創建圖表
接下來創建圖表，首先設置一個新的方法叫creatChart并初始化 AmSerialChart：
function createChart(){
// chart variable is declared in the top
chart = new AmCharts.AmSerialChart();
// here we tell the chart name of category field in our data provider.
// we called it "date" (look at parseCSV method)
chart.categoryField = "date";
// chart must have a graph
var graph = new AmCharts.AmGraph();
// graph should know at what field from data provider it should get values.
// let's assign value1 field for this graph
graph.valueField = "value1";
// and add graph to the chart
chart.addGraph(graph);
// 'chartdiv' is id of a container where our chart will be
chart.write('chartdiv');
}
當頁面加載時調用這個方法：
window.onload = function() {
createChart();
loadCSV("data.txt");
}
最后，設置圖表的data provider，然后讓圖表重建，方法是在parseCSV方法的最后添加這幾行：
// set data provider to the chart
chart.dataProvider = dataProvider;
// this will force chart to rebuild using new data
chart.validateData();
下面是完整的代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascript/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
// declaring variables
var chart;
var dataProvider;
// this method called after all page contents are loaded
window.onload = function() {
createChart();
loadCSV("data.txt");
}
// method which loads external data
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
// method which parses csv data
function parseCSV(data){
//replace UNIX new lines
data = data.replace (/\r\n/g, "\n");
//replace MAC new lines
data = data.replace (/\r/g, "\n");
//split into rows
var rows = data.split("\n");
// create array which will hold our data:
dataProvider = [];
// loop through all rows
for (var i = 0; i < rows.length; i++){
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
// column is array now
// first item is date
var date = column[0];
// second item is value of the second column
var value1 = column[1];
// third item is value of the fird column
var value2 = column[2];
// create object which contains all these items:
var dataObject = {date:date, value1:value1, value2:value2};
// add object to dataProvider array
dataProvider.push(dataObject);
}
}
// set data provider to the chart
chart.dataProvider = dataProvider;
// this will force chart to rebuild using new data
chart.validateData();
}
// method which creates chart
function createChart(){
// chart variable is declared in the top
chart = new AmCharts.AmSerialChart();
// here we tell the chart name of category
// field in our data provider.
// we called it "date" (look at parseCSV method)
chart.categoryField = "date";
// chart must have a graph
var graph = new AmCharts.AmGraph();
// graph should know at what field from data
// provider it should get values.
// let's assign value1 field for this graph
graph.valueField = "value1";
// and add graph to the chart
chart.addGraph(graph);
// 'chartdiv' is id of a container
// where our chart will be
chart.write('chartdiv');
}
</script>
</head>
<body style="background-color:#EEEEEE">
<div id="chartdiv" style="width:600px; height:400px; background-color:#FFFFFF"></div>
</body>
</html>
在瀏覽器中打開serial.html，就能得到下圖中的圖表：
怎么樣？經過上面的解析，對amCharts的JavaScript/HTML5 Charts圖表應該有了進一步的了解吧。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都控件
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線