在本教程中，我將用一個(gè)小小的例子演示如何從一個(gè)文件中加載和解析CSV數(shù)據(jù)。假如你使用的是amCharts的JavaScript/HTML5 Charts，并且不用下載包中的FlashOrJavaScript后備腳本，那么這篇教程將會(huì)給你一些啟發(fā)，同時(shí)還能幫助你更好的理解amCharts的JavaScript圖表。
準(zhǔn)備數(shù)據(jù)文件
首先下載JavaScript/HTML5 Charts，由于這里我們不用flash圖表，復(fù)制 amcharts/javascript文件夾到你的工作目錄中，找到 basicSamples/javaScriptOnly文件夾并復(fù)制serial.html文件到這個(gè)文件夾下。用文本編輯器打開(kāi)文件并修復(fù)JavaScript文件路徑，刪除路徑最開(kāi)頭的../../amcharts/。如果用瀏覽器打開(kāi)serial.html，你將會(huì)看到以下圖表：
圖表的數(shù)據(jù)放在html文件中，它不是基于日期的，所以我們來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的文本文件data.txt并添加一些數(shù)據(jù)到里頭，這些數(shù)據(jù)是不規(guī)則的：
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文件，然后回到文本編輯器打開(kāi)這個(gè)文件。刪除chartData變量和它的所有數(shù)據(jù)，還有window.onload方法的所有內(nèi)容。
加載數(shù)據(jù)
-
添加一個(gè)方法，加載外部數(shù)據(jù)到腳本中
-
添加復(fù)制的方法
-
當(dāng)窗口加載時(shí)調(diào)用loadCSV函數(shù)
示例代碼如下：
<!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>
用瀏覽器打開(kāi)serial.html文件，需要一個(gè)彈出菜單打開(kāi)所有數(shù)據(jù)，但這里還沒(méi)有實(shí)現(xiàn)。加載外部數(shù)據(jù)需要所有的文件放在web服務(wù)器上，如果你簡(jiǎn)單的從硬盤(pán)中打開(kāi)文件，這個(gè)腳本不會(huì)運(yùn)行。這意味著必須將所有的文件都上傳到網(wǎng)站上。或者在計(jì)算機(jī)上安裝Web服務(wù)器，將所有的文件放到本地主機(jī)文件夾中，然后在本地查看頁(yè)面。
注意，數(shù)據(jù)文件可以是動(dòng)態(tài)的，這意味著你可以用php,asp或者其他腳本加載數(shù)據(jù)。
解析數(shù)據(jù)
在腳本頂部聲明dataProvider變量，下面是加載和解析數(shù)據(jù)的完整腳本：
<!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>
創(chuàng)建圖表
接下來(lái)創(chuàng)建圖表，首先設(shè)置一個(gè)新的方法叫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');
}
當(dāng)頁(yè)面加載時(shí)調(diào)用這個(gè)方法：
window.onload = function() {
createChart();
loadCSV("data.txt");
}
最后，設(shè)置圖表的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>
在瀏覽器中打開(kāi)serial.html，就能得到下圖中的圖表：
怎么樣？經(jīng)過(guò)上面的解析，對(duì)amCharts的JavaScript/HTML5 Charts圖表應(yīng)該有了進(jìn)一步的了解吧。
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：慧都控件
金喜正規(guī)買(mǎi)球 
19次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買(mǎi)球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線