JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖
一、基礎柱狀圖
二、基礎的折線圖
三、基礎的餅圖
四、基礎的散點圖
一、基礎柱狀圖
如果你還沒有想好你的數據用什麽類型的圖表來展示你的數據，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示數據的變化過程或者表示多個數據之間的差異。
1、引入javascrippt
使用flotr2這個JavaScript庫來創建圖表。使用flotr2之前，不需要引入其他的JavaScript庫（比如jquery），但是flotr2必須依賴HTML5的canvas元素的支持。canvas支持的主流瀏覽器有：chrome，Safari，firefox，以及IE9以上。如果非要支持到IE8，可以再引入一個額外的庫excanvas.min.js
首先看一下html代碼
2、創建一個包含圖表容器的div元素
創建一個div來包裹這個圖表，要求這個div元素必須指定他的寬和高，圖表才能建立起來。下面例子采用的是內聯的方法指定div的css樣式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="chart"style="width: 600px;height: 300px;"></div> <script src="js/flotr2.js"></script> </body> </html>
上面就是一個簡單的代碼框架。
3、定義數據
有了代碼框架，就應該考慮如何顯示數據。
顯示數據：1、可以是本地的數據；2、可以是ajax請求獲取的數據
建立三維數組
<script>
var win = [
[
[
[x,y]中，x表示年，y表示獲勝的場次。我們把若幹個x，y組合使用一個外層數組進行嵌套，這個嵌套的數組是序列。我們在這個序列外邊又嵌套一個外層數組，以便我們將來可以存儲多個序列。
註意：（1）數組的第一層：每一個獨立的數據自身是一個數組，包含x，y。
（2）數組的第二層：若幹個獨立的數據在一起構成一個數組，成為序列。
（3）組的第三層：若幹個序列構成flotr2渲染圖表使用的完整的數據，形式也是數組。
4、繪制圖表
簡單的繪制一個圖表，調用flotr2庫。
window.onload = function() { Flotr.draw( document.getElementById("chart"), wins, { bars: { show: true } } ); };
代碼中，window.onload這個函數，在我們需要把文檔加載完成之後調用，window.onload事件觸發後，我們執行flotr.draw這個函數，並傳3個參數給它，這三個參數包括：圖表的html元素本身，剛才定義的圖表數據，一些可配置的圖表選項。
如果你的頁面有jquery，可以使用jq方法來改寫這代碼。
5、改進縱坐標
上圖有問題：
（1）縱軸的刻度。flotr2默認將數據中的最大值和最小值自動設置為坐標的取值範圍。2007年對應的是11，但是給人感覺就是0，這種情況需要避免。
（2）縱軸的格式。flotr2默認將精確到小數點後一位，在標註中或多帶一個多余的“.0”。
Flotr.draw( document.getElementById("chart"), wins, { bars: { show: true, }, yaxis:{ min:0, tickDecimals:0, } } );
註意：flotr2區分大小寫。
flotr.draw函數通過min屬性設置縱軸的最小值；
通過ticketDecimals屬性告訴標註展示的小數精度。我們不想要小數，設置成0。
簡單進行圖表選項的配置。解決了縱軸最小值問題和刻度格式問題。
6、改進橫軸
同時還會出現2個問題，（1）橫軸也會出現標註也被默認為擁有1位小數的數字;（2）橫軸兩個柱體之間缺乏間距。
先解決第一個問題：橫軸數據的單位是年，我們可以使用縱軸的方式通過tickDecimals屬性，設置成0，但是這種做法並不是通用。如果橫軸不是數字類型（比如隊名），這種解決方案就是解決不了。為了適用更普遍的情況
我們首先改變一下數據結構，建立一個新的數組years，在這個數組中，每一個年份有一個索引數字配對。同時修改之前的wins數組，將原來的年份使用對應的索引數字替代，這樣這兩個數組建立了查詢關系。
var wins = [ [ [0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28] ] ]; var years = [[0,"2006"],[1,"2007"],[2,"2008"],[3,"2009"],[4,"2010"],[5,"2011"],[6,"2012"]];
然後，我們將新定義的years數組中的這些整數映射到對應的字符串上。我們這裏的字符串映射到年份數字，如果需要可以以任何字符串代替。
xaxis:{
ticks:years,
},
我們對x軸使用ticks屬性，告訴flotr2把x軸的標註通過years數組和x值進行匹配。
在解決第二個問題：默認情況下，每一個柱體是平均分配到整個橫軸的長度，但是會顯得很擁擠。我們可以通過barWidth屬性進行調整。把這個屬性設置到0.5，這樣每一個柱體就占原空間的一半。
7、調整樣式
怎麽把表做的炫酷點，可以添加標題，可以去掉不需要的網格線，調一下柱體顏色
Flotr.draw( document.getElementById("chart"), wins, { title:"球隊獲勝", colors:["#89afd2"], bars: { show: true, barWidth:0.5,
shadowSize:0,
fillOpacity:1,
linewidth:0,
}, xaxis:{ ticks:years, }, yaxis:{ min:0, tickDecimals:0, }, grid:{ horizontalLines:false, verticalLines:false, }, } );
視覺上與背景強烈的對比，通過高度不同體現差值差異。
8、多彩的主題色彩
舉個栗子，要想在一年中多個球隊的總勝利的場數，這種情況下，每個球隊的柱體就需要用不同顏色來代表。
首先調整一下數據結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="chart" style="width: 600px;height: 300px;"></div>
<script src="js/flotr2.js"></script>
<script>
// var wins = [
// [
// [0, 13],
// [1, 11],
// [2, 15],
// [3, 15],
// [4, 18],
// [5, 21],
// [6, 28]
// ]
// ];
var wins2 = [[[0,28],[1,28],[2,21],[3,20],[4,19]]];
// var years = [[0,"2006"],[1,"2007"],[2,"2008"],[3,"2009"],[4,"2010"],[5,"2011"],[6,"2012"]];
var teams = [[0,"MCI"],[1,"MUN"],[2,"ARS"],[3,"TOT"],[4,"NEW"]];
window.onload = function() {
Flotr.draw(
document.getElementById("chart"), wins2, {
title:"2011-2012年球隊獲勝場數",
// title:"球隊獲勝",
// colors:["#89afd2"],
colors:["#89afd2", "#1d1d1d", "#df021d", "#0e204b", "#e67840"],
bars: {
show: true,
barWidth:0.5,
shadowSize:0,
fillOpacity:1,
linewidth:0,
},
xaxis:{
// ticks:years,
ticks:teams,
},
yaxis:{
min:0,
tickDecimals:0,
},
grid:{
horizontalLines:false,
verticalLines:false,
},
}
);
};
</script>
</body>
</html>
註意：顏色的bug還沒有解決。
9、可能會出現的bug
有時候flotr會出現一些bug，在構建圖表的過程中，flotr2會創建一個虛擬的html元素，以便計算尺寸大小。flotr2為了讓這些元素在頁面不可見，會調整一下css定位，在屏幕可視範圍內消失。flotr2.js的2281行，有css定義
D.setStyles(div, { ‘position‘ : ‘absolute‘, ‘top‘ : ‘-10000px‘ });
官方還沒有改進這個問題，如果沒有超過10 00像素，那就沒有必要進行優化；如果你的文檔超過10 000像素，就會出現那個虛擬的HTML元素，解決辦法改進這個flotr2.js庫，或者新寫一個
$(".flotr-dummy-div").parent().hide();
二、基礎的折線圖
柱狀圖處理一般數據來說，已經足夠了，但是當數據量大了，折線圖展示就更加有效。折線圖尤其擅長於展現數據整體趨勢，避免讓用戶過於關註個別的數據點而忽略了整體。
舉個栗子：想展示大氣中二氧化碳的濃度和全球氣溫，他們之間存在著某種相關性。我們想展示這兩組數據在同一時間的變化，找出他們之間存在的一些必然聯系，對於呈現這些趨勢來說，折線圖是完美的可視化工具。
和柱狀圖一樣，你需要先在你的網頁中引入Flotr2庫，然後創建一個<div>元素來包裹住這個圖表。接下來，就是數據的準備工作了。
1、定義數據
首先我們來處理一下二氧化碳濃度的測量數據。
var co2 = [ [ 1959, 315.97 ], [ 1960, 316.91 ], [ 1961, 317.64 ], [ 1962, 318.45 ], // Data ...
因為我們的二氧化碳測量值是從1959年開始統計的，所以我們也同樣把溫度數據的起點設為1959年。
var temp = [ [ 1959, 0.0776 ], [ 1960, 0.0280 ], [ 1961, 0.1028 ], [ 1962, 0.1289 ], // Data ...
2、繪制co2圖像
用Flotr2繪制一個數據集是非常容易的。我們只要簡單地調用Flotr對象的draw()方法就可以了。這個方法只有兩個必需參數：一個圖表的HTML元素，以及數據本身。
Flotr.draw( document.getElementById("chart"), [{ data: co2, lines: { show: true } }] );
這個圖表清晰地展示了過去50年二氧化碳濃度變化的趨勢
3、繪制溫度曲線
把氣溫的數據添加進來
Flotr.draw( document.getElementById("chart"), [ { data: co2, lines: { show: true, }, }, { data:temp, line:{ show:true, }, yaxis:2 } ] );
我們溫度的數據還包含一個yaxis參數，並且將值設置為2。這就是告訴flotr，對溫度參數使用第二條縱刻度。如果有多個縱軸時候，很難向用戶解釋網格線和縱軸數字對應的關系。
4、改進圖標的可讀性
通過配置更多的flotr2屬性和參數，我們可以將折線圖的可讀性進一步提高。
首先消除網格線，因為她與溫度測量值沒有關系。
然後，我們可以draw()方法添加一些屬性，優化兩邊的縱軸的數字範圍。
Flotr.draw( document.getElementById("chart"), [ { data: co2, lines: { show: true, }, }, { data:temp, line:{ show:true, }, yaxis:2 } ],{ grid:{ horizontalLines:false, verticalLines:false, }, yaxis:{ min:300, max:400, }, y2axis:{ min:-0.15, max:0.69 } } );
添加了grid屬性，並把horizontallines和verticallines兩個二級屬性的屬性值設為false，這樣就關閉了網格線。然後，設置了yaxis屬性的minimum和maximum兩個值（代表二氧化碳濃度範圍）。最後，我們在標註的地方設置了y2axis屬性，即溫度的值的縱軸取值範圍。
圖表變得更加清晰和易讀。
5、理解右側的溫度標記
右側縱軸上的溫度標記可能會對用戶造成困擾，因為這些數字並不是實際的溫度，其代表的是和20世紀平均溫度之間的溫度差異。我們使用的方法是創建一個虛擬的數據集，並添加到圖表中。這個數據集中只包含一個值：0。
var zero = []; for (var yr=1959; yr<2012; yr++) { zero.push([yr, 0]); };
當我們添加數據集到圖表中時，我們要聲明這個數據集要對應右側的縱軸。另外，因為我們想讓這條線當做圖表框架的一部分出現，而不是另外一個數據集出現。所以我們可以通過把它設置成寬1像素，深灰色，沒有陰影來降低它的重要程度。
我們首先在數據集中放置了一個數值為0的刻度線。由此執行代碼後，Flotr2就會在0刻度線上面一層繪制實際的數據。
6、給圖表添加標註
給圖表添加適當的標註。標註不僅包含所有的標題，也包含每個獨立的數據集。同時為了使溫度軸上的數字標記易於理解，我們還會給溫度的刻度添加一個“℃”（攝氏度）的後綴。
為每組數據添加標註，使用的是label屬性。圖表的標題我們用title屬性來標註，然後，我們使用tickFormatter()函數來添加“℃”後綴。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="chart" style="width: 600px;height: 400px;"></div>
<script src="js/flotr2.js"></script>
<script>
var co2 = [
[1959, 315.97],
[1960, 316.91],
[1961, 317.64],
[1962, 318.45],
[1963, 318.99],
[1964, 319.62],
[1965, 320.04],
[1966, 321.38],
[1967, 322.16],
[1968, 323.04],
[1969, 324.62],
[1970, 325.68],
[1971, 326.32],
[1972, 327.45],
[1973, 329.68],
[1974, 330.18],
[1975, 331.08],
[1976, 332.05],
[1977, 333.78],
[1978, 335.41],
[1979, 336.78],
[1980, 338.68],
[1981, 340.10],
[1982, 341.44],
[1983, 343.03],
[1984, 344.58],
[1985, 346.04],
[1986, 347.39],
[1987, 349.16],
[1988, 351.56],
[1989, 353.07],
[1990, 354.35],
[1991, 355.57],
[1992, 356.38],
[1993, 357.07],
[1994, 358.82],
[1995, 360.80],
[1996, 362.59],
[1997, 363.71],
[1998, 366.65],
[1999, 368.33],
[2000, 369.52],
[2001, 371.13],
[2002, 373.22],
[2003, 375.77],
[2004, 377.49],
[2005, 379.80],
[2006, 381.90],
[2007, 383.77],
[2008, 385.59],
[2009, 387.37],
[2010, 389.85],
[2011, 391.62],
];
var temp = [
[1959, 0.0776],
[1960, 0.0280],
[1961, 0.1028],
[1962, 0.1289],
[1963, 0.1469],
[1964, -0.1171],
[1965, -0.0523],
[1966, 0.0063],
[1967, 0.0219],
[1968, 0.0093],
[1969, 0.1139],
[1970, 0.0684],
[1971, -0.0315],
[1972, 0.0558],
[1973, 0.1909],
[1974, -0.0527],
[1975, 0.0172],
[1976, -0.0753],
[1977, 0.1779],
[1978, 0.0990],
[1979, 0.1856],
[1980, 0.2301],
[1981, 0.2701],
[1982, 0.1521],
[1983, 0.3170],
[1984, 0.1259],
[1985, 0.1065],
[1986, 0.1956],
[1987, 0.3293],
[1988, 0.3407],
[1989, 0.2659],
[1990, 0.3988],
[1991, 0.3757],
[1992, 0.2323],
[1993, 0.2621],
[1994, 0.3245],
[1995, 0.4473],
[1996, 0.3170],
[1997, 0.5117],
[1998, 0.6286],
[1999, 0.4525],
[2000, 0.4264],
[2001, 0.5496],
[2002, 0.6121],
[2003, 0.6211],
[2004, 0.5779],
[2005, 0.6510],
[2006, 0.5977],
[2007, 0.5923],
[2008, 0.5134],
[2009, 0.5985],
[2010, 0.6621],
[2011, 0.5362],
];
var zero = [];
for (var yr=1959; yr<2012; yr++) { zero.push([yr, 0]); };
window.onload = function() {
Flotr.draw(
document.getElementById("chart"),
[{
data:zero,
label: "20<sup>th</sup>-Century Baseline Temperature",
line:{show:true,lineWidth:1},
yaxis:2,
showdowSize: 0,
color: "#545454"
},
{
data: co2,
label: "CO<sub>2</sub> Concentration (ppm)",
lines: {show: true,},
},
{
data:temp,
label: "Yearly Temperature Difference (°C)",
line:{show:true,},
yaxis:2
},
],
{
title: "20<sup>th</sup>-世紀全球氣溫和co2濃度的關系圖",
grid:{
horizontalLines:false,
verticalLines:false,
},
yaxis:{
min:300,
max:400,
},
y2axis:{
min:-0.15,
max:0.69,
tickFormatter:function(val){return val+" °C";}
}
}
);
}
</script>
</body>
</html>
tickFormatter屬性會遍歷對應軸上的每一個標記值，並對其進行格式化處理。
實際上，單個數據點不是可視化要關註的。我們其實是想要展現趨勢——每一個數據集的趨勢以及數據集之間的相關性。把這些點用線串連起來以引導用戶獲取正確的趨勢，這才是可視化的核心價值。
三、基礎的餅圖
由於餅圖並不能很有效地表達數據，所以在可視化大家庭中它並不是很受歡迎。
如果你要和其他值進行對比，那麽首選柱狀圖。它基本上都能提供最好的可視化效果。
但有一種情況例外，當我們想要把單個值和總體進行比較時，餅圖是非常有效的。舉個例子來說，我們要看世界貧困人口的百分比。在這種情況下，餅圖就能很好的勝任這個工作。接下來我們就要用Flotr2來構建一個這樣的圖表。
1、定義數據
var pieData =[[[0,22.4]],[[1,77.6]]];
有一個包含兩個數據集的數組：一個是貧困人口的百分比（22.4）另一個是剩下的部分（77.6）。每一個數組本身還包含了一個數組。在這個例子中，餅圖一般情況下在每個集合中只有一個點用x和y值來表示（在數組中把每一個這樣的x,y值存成一個數組）。對於餅圖來說，x值是不相幹的，所以我們只是用簡單的0,1來占位。
2、繪制圖表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="chart" style="width: 300px;height: 300px;"></div>
<script src="js/flotr2.js"></script>
<script>
var pieData =[[[0,22.4]],[[1,77.6]]];
window.onload = function(){
Flotr.draw(document.getElementById("chart"),
pieData,
{
pie:{show:true,},
yaxis:{showLabels:false,},
xaxis:{showLavels:false,},
grid:{
horizontalLines:false,
verticalLines:false,
}
}
);
}
</script>
</body>
</html>
需要讓x和y軸的標註不可用，只需要在代碼中設置showLabels屬性為false。我們還需要關閉網格線，因為網格對於餅圖並沒有什麽作用。我們只需要在代碼中設置grid選項的verticalLines和HorizontalLines兩個屬性就可以完成。
3、標註數值
為了區分每一個標註，我們不得不改變我們數據的結構。不用數組來存儲，而是創建一個個對象來存儲每一個集合。每一個對象的data屬性將包含對應的數據點，我們還會創建一個label屬性來放置文本標註內容。
var data = [ {data: [[0,22.4]], label: "Extreme Poverty"}, {data: [[1,77.6]]} ];
現在，當我們調用draw()方法，我們只需要添加一個title的選項，Flotr2就會在圖像上添加一個標題，並且根據我們的label屬性來對餅圖中的一部分做一個簡單的圖例說明。我們會在標題中提出一個問題，這使得圖表更加吸引人。這也解釋了我們為什麽只標註了其中的一個區域：這個標註區域回答了標題中的問題
四、離散圖
柱狀圖對於單一數據維度的可視化展現通常是非常有效的（就像我們之前創建的展現勝利場次的柱狀圖）。但如果我們想要探索兩種不同類型數據之間的關系，離散型圖表會更有效。
舉個栗子：
想要展示一個城市健康體檢的花費（一個維度）和平均壽命（另一個維度）之間的關系。
1、定義數據
var europe_data= [ { country: "Australia", spending: 9.1, life: 81.8 }, { country: "Austria", spending: 11.0, life: 80.7 }, { country: "Belgium", spending: 10.5, life: 80.3 }, // Data ...
2、格式化數據
我們需要重構原始數據來匹配Flotr2對數據格式的需要。
我們一開始先定義一個空數組，然後循環源數據health_data，將源數據health_data中我們圖表中需要的元素提取出來，push到data數組中
var scatterData = []; for(var i=0;i<europe_data.length;i++){ scatterData.push([ europe_data[i].spending, europe_data[i].life, ]); };
3、繪制數據
window.onload = function(){ Flotr.draw( document.getElementById("chart"), [{ data:scatterData, points:{show:true}, }] ); }
首先一個是我們HTML文檔中放置我們圖表的元素，第二個是一個數組，裏面存著圖表的數據。通常，Flotr2可以在同一個圖表中繪制多個數據集的內容，所以數組可能會有多個對象。因為在我們的例子中只繪制一個數據集，所以數組中只有一個對象。這個對象會識別data屬性，並且告訴Flotr2用點來替代線展示（用points屬性替換lines屬性）。
註意看，有一些點壓在了圖表的邊緣。
4、調整圖表的軸
但是Flotr2會自動計算每個軸的範圍，且默認的算法結果通常間距都很小。 Flotr2有一個autoscale的選項，如果你設置了，類庫會嘗試找到合適的範圍自動關聯x、 y軸。
window.onload = function(){ Flotr.draw( document.getElementById("chart"), [{ data:scatterData, points:{show:true}, }], { xaxis:{min:5,max:20}, yaxis:{min:70,max:85}, } ); }
我們在draw()方法中添加了第三個參數，包含我們想要的選項，在這個例子中是x和y軸屬性。
5、標註數據
我們的圖表目前看來很合理，但它並沒有明確用戶想看到的東西。我們需要添加一些標註來識別數據。再多加一些選項就可以闡明圖表了。
window.onload = function(){ Flotr.draw( document.getElementById("chart"), [{ data:scatterData, points:{show:true}, }], { title:"健康體檢花費與平均壽命關系", subtitle:"2010OECD數據", xaxis:{min:5,max:20,tickDecimals:0,title:"花費占GDP比重",tickFormatter:function(val){return val+"%"}}, yaxis:{min:70,max:85,tickDecimals:0,title:"年份"}, } ); }
所有標題和次級標題都可以用title和subtile選項表示，當title屬性在xaxis和yaxis選項中時，是用來命名這些軸的。除了添加標註，我們還要修改tickDecimals屬性告訴Flotr2對於x和y軸的值不需要小數點。
tickFormatter屬性會遍歷對應軸上的每一個標記值，並對其進行格式化處理。
6、回答用戶的需求
我們尤其想要搶先回答用戶可能提出的問題，並且試著在圖表中直接給出答案。在圖表中至少暴露了三個問題：
1．都展示了哪些國家？
2．地區之間有哪些不同？
3．在右邊遠離其他數據的那個點是什麽？
我們解決這個問題的方法是將數據分成多個集合，並且用不同的顏色和標註表明。首先我們要把數據拆分到各個地區。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="chart" style="width: 600px;height: 400px;"></div>
<script src="js/flotr2.js"></script>
<script>
var europe_data = [{
country: "Austria",
spending: 11.0,
life: 80.7
}, {
country: "Belgium",
spending: 10.5,
life: 80.3
}, {
country: "Czech Republic",
spending: 7.5,
life: 77.7
}, {
country: "Denmark",
spending: 11.1,
life: 79.3
}, {
country: "Estonia",
spending: 6.3,
life: 75.6
}, {
country: "Finland",
spending: 8.9,
life: 80.2
}, {
country: "France",
spending: 11.6,
life: 81.3
}, {
country: "Germany",
spending: 11.6,
life: 80.5
}, {
country: "Greece",
spending: 10.2,
life: 80.6
}, {
country: "Hungary",
spending: 7.8,
life: 74.3
}, {
country: "Iceland",
spending: 9.3,
life: 81.5
}, {
country: "Ireland",
spending: 9.2,
life: 81.0
}, {
country: "Italy",
spending: 9.3,
life: 82.0
}, {
country: "Luxembourg",
spending: 7.9,
life: 80.7
}, {
country: "Netherlands",
spending: 12.0,
life: 80.8
}, {
country: "Norway",
spending: 9.4,
life: 81.2
}, {
country: "Poland",
spending: 7.0,
life: 76.3
}, {
country: "Portugal",
spending: 10.7,
life: 79.8
}, {
country: "Slovak Republic",
spending: 9.0,
life: 75.2
}, {
country: "Slovenia",
spending: 9.0,
life: 79.5
}, {
country: "Spain",
spending: 9.6,
life: 82.2
}, {
country: "Sweden",
spending: 9.6,
life: 81.5
}, {
country: "Switzerland",
spending: 11.4,
life: 82.6
}, {
country: "Turkey",
spending: 6.1,
life: 74.3
}, {
country: "United Kingdom",
spending: 9.6,
life: 80.6
}, ];
var pacific_data = [{
country: "Australia",
spending: 9.1,
life: 81.8
}, {
country: "New Zealand",
spending: 10.1,
life: 81.0
}, ];
var americas_data = [{
country: "Canada",
spending: 11.4,
life: 80.8
}, {
country: "Chile",
spending: 8.0,
life: 79.0
}, {
country: "Mexico",
spending: 6.2,
life: 75.5
}, {
country: "United States",
spending: 17.6,
life: 78.7
}, ];
var mideast_data = [{
country: "Israel",
spending: 7.5,
life: 81.7
}, ];
var asia_data = [{
country: "Japan",
spending: 9.5,
life: 83.0
}, {
country: "Korea",
spending: 7.1,
life: 80.7
}, ];
var us_data = [{
country: "United States",
spending: 17.6,
life: 78.7
}, ];
var pacific = [],
europe = [],
americas = [],
mideast = [],
asia = [],
us = [];
for(i = 0; i < pacific_data.length; i++) {
pacific.push([pacific_data[i].spending, pacific_data[i].life]);
}
for(i = 0; i < europe_data.length; i++) {
europe.push([europe_data[i].spending, europe_data[i].life]);
}
for(i = 0; i < americas_data.length; i++) {
americas.push([americas_data[i].spending, americas_data[i].life]);
}
for(i = 0; i < mideast_data.length; i++) {
mideast.push([mideast_data[i].spending, mideast_data[i].life]);
}
for(i = 0; i < asia_data.length; i++) {
asia.push([asia_data[i].spending, asia_data[i].life]);
}
for(i = 0; i < us_data.length; i++) {
us.push([us_data[i].spending, us_data[i].life]);
}
window.onload = function() {
Flotr.draw(
document.getElementById("chart"),
[
{ data: pacific, label: "Pacific", points: {show:true} },
{ data: europe, label: "Europe", points: {show:true} },
{ data: americas, label: "Americas", points: {show:true} },
{ data: mideast, label: "Middle East", points: {show:true} },
{ data: asia, label: "Asia", points: {show:true} },
{ data: us, label: "United States", points: {show:true} },
], {
title: "健康體檢花費與平均壽命關系",
subtitle: "2010OECD數據",
xaxis: {
min: 5,
max: 25,
tickDecimals: 0,
title: "花費占GDP比重",
tickFormatter: function(val) {
return val + "%"
}
},
yaxis: {
min: 70,
max: 85,
tickDecimals: 0,
title: "年份"
},
legend: {position: "ne"},
}
);
}
</script>
</body>
</html>
legend: {position: "ne"},是將圖例定位在圖表的右上角。
JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖