本節書摘來自異步社區《JavaScript數據可視化編程》一書中的第1章第1.4節作者 【美】Stephen A.Thomas 譯者 翟東方 , 張超 , 劉暢 責編 陳冀康更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

1.4 用離散圖表繪制x/y值

柱狀圖對于單一數據維度的可視化展現通常是非常有效的就像我們之前創建的展現勝利場次的柱狀圖。但如果我們想要探索兩種不同類型數據之間的關系離散型圖表會更有效。假設我們想要展示一個城市健康體檢的花費一個維度和平均壽命另一個維度之間的關系。讓我們通過一個例子一步步的看看用數據是如何創建離散型圖表的。

就像在本書1.1節介紹的一樣我們需要在我們的網頁中加載Flotr2類庫并設置一個div元素來放置我們將構建的圖表。

1.4.1　第1步　定義數據
在這個例子中我們將使用經濟合作與發展組織簡稱經合組織(OECD在2012年的報告。這個報告包含了健康體檢花費價格占全國生產總值的比例還有平均壽命盡管這個報告是2012年年底發布的但它也包含了2010年的數據。在下面你會看到一小段摘錄的數據存放在了JavaScript數組里。

var health_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 set continues...

1.4.2　第2步　格式化數據
像之前的例子一樣我們需要重構原始數據來匹配Flotr2對數據格式的需要。如下面這段JavaScript代碼展現的。我們一開始先定義一個空數組然后循環源數據health_data將源數據health_data中我們圖表中需要的元素提取出來push到data數組中。

var data = []; for (var i = 0; i < health_data.length; i++) { data.push([ health_data[i].spending,health_data[i].life]); };

因為Flotr2不需要依賴jQuery我們在例子中就沒有用jQuery封裝的函數。但如果你有其他原因在頁面中使用了jQuery你可以使用一些封裝函數例如使用.map()函數可以簡化重構數據的代碼。在2.1.7小節中有講解jQuery的.map()函數的詳細例子。

1.4.3　第3步　繪制數據
現在我們需要調用Flotr對象的draw()方法來創建我們的圖表。我們首先嘗試使用默認選項來創建。

Flotr.draw( document.getElementById("chart"),[{ data: data, points: {show:true} }] );

如你所見Flotr2至少需要兩個參數。首先一個是我們HTML文檔中放置我們圖表的元素第二個是一個數組里面存著圖表的數據。通常Flotr2可以在同一個圖表中繪制多個數據集的內容所以數組可能會有多個對象。因為在我們的例子中只繪制一個數據集所以數組中只有一個對象。這個對象會識別data屬性并且告訴Flotr2用點來替代線展示用points屬性替換lines屬性。

圖1-15展示了我們的結果注意看有一些點壓在了圖表的邊緣。

1.4.4　第4步　調整圖表的軸
前面做的圖表還不錯但是Flotr2會自動計算每個軸的范圍且默認的算法結果通常間距都很小。 Flotr2有一個autoscale的選項如果你設置了類庫會嘗試找到合適的范圍自動關聯x、 y軸。不幸的是在我以往的經驗中Flotr2提供的默認選項對范圍的選取很少有顯著的改善所以大多數情況我們最好不去明確設置它們。下面會展示我們對圖表怎么做。

Flotr.draw(document.getElementById("chart"),[{data: data, points: {show:true}}],{ xaxis: {min: 5, max: 20},yaxis: {min: 70, max: 85}}); 我``` 們在draw()方法中添加了第三個參數包含我們想要的選項在這個例子中是x和y軸屬性。在每個例子中我們都可以明確的設置一個最小值一個最大值。通過給數據指定范圍留出空間使得我們的圖表在圖1-16中更易讀。圖1-17看法更好一些。**1.4.5　第5步　標注數據** 我們的圖表目前看來很合理但它并沒有明確用戶想看到的東西。我們需要添加一些標注來識別數據。再多加一些選項就可以闡明圖表了。

Flotr.draw(

document.getElementById("chart"), [{ data: data, points: {show:true} }], { title: "Life Expectancy vs. Health-Care Spending",subtitle: "(by country, 2010 OECD data)",xaxis: {min: 5, max: 20, 1tickDecimals: 0, title: "Spending as Percentage of GDP"}, yaxis: {min: 70, max: 85, 2tickDecimals: 0, title: "Years"} }

);

圖表中的所有標題和次級標題都可以用title和subtile選項表示當title屬性在xaxis和yaxis選項中時是用來命名這些軸的。除了添加標注我們還要在1和2的位置修改tickDecimals屬性告訴Flotr2對于x和y軸的值不需要小數點。圖1-17看上去更好一些。**1.4.6　第6步　闡明x軸** 盡管通過我們前面的修改圖表已經有了明顯的改進但仍有一些數據描述上的煩人問題。 x軸代表了百分比但標注卻顯示的是一個整數。這個差別可能會導致我們的用戶一開始有一些困惑所以讓我們開始修正這個問題。 Flotr2允許我們按照我們的想法來格式化軸的標注。在這個例子中我們僅僅希望給值添加一個百分號足夠簡單。

Flotr.draw(
　 document.getElementById("chart"),
　 [{
　 data: data, points: {show:true}
　 }],
　 {
　 title: "Life Expectancy vs. Health-Care Spending",
　 subtitle: "(by country, 2010 OECD data)",
　 xaxis: {min: 5, max: 20, tickDecimals: 0,
　 title: "Spending as Percentage of GDP",
1 tickFormatter: function(val) {return val+"%"}},
　 yaxis: {min: 70, max: 85, tickDecimals: 0, title: "Years"}
　 }
　);

上面代碼的關鍵是xaxis項下的tickFormatter屬性代碼1處。這個屬性指定了一個函數。當tickFormatter被指定Flotr2就不會自動繪制標注而是調用我們定義的函數。將標注中數字的值當參數傳給函數。 Flotr2會從函數中獲取返回的字符串然后顯示到標注上。在這個例子中我們僅僅在值后面添加了一個百分號。在圖1-18中用了添加百分比值標注的水平軸后我們的圖表數據顯得清晰了。**1.4.7　第7步　回答用戶的問題** 現在我們的圖表已經成功的把數據展現出來了我們可以開始從用戶的角度來更細致地改進可視化。我們尤其想要搶先回答用戶可能提出的問題并且試著在圖表中直接給出答案。在圖表中至少暴露了三個問題1都展示了哪些國家2地區之間有哪些不同3在右邊遠離其他數據的那個點是什么可以用給每個數據點添加鼠標的mouseover事件或者加提示工具的方法來回答這些問題。有兩個原因使我們不會在這個例子中使用前面說的方法。首先也是最明顯的可視化交互是第2章的主題這一章只考慮靜態圖表和圖像。其次mouseover和提示工具在用戶使用觸摸設備例如智能手機或者平板電腦訪問我們的網站時是沒有效果的。如果我們要求用戶只有使用鼠標才能完全理解我們可視化的內容我們可能忽略了很大一部分用戶并且是快速正增長的用戶數。我們解決這個問題的方法是將數據分成多個集合并且用不同的顏色和標注表明。首先我們要把數據拆分到各個地區。

var pacific_data = [

{ country: "Australia", spending: 9.1, life: 81.8 }, { country: "New Zealand", spending: 10.1, life: 81.0 },

];
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 },

// Data set continues...

var us_data = [

{ country: "United States", spending: 17.6, life: 78.7 }

];
因為用戶可能想知道圖表中右側遠離其他數據單獨的那個點表示的是哪個國家而不僅僅想知道它屬于哪個大洲所以我們就將美國的數據從美洲的數據集合中提取出來了。對于其他國家用各大洲就足夠識別了。正因如此我們需要重新構建這些數組變成Flotr2的格式。這段代碼和第4步一樣我們只是把數據集重復一次。

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 ]);

}
// Code continues...

一旦我們完成了國家的劃分我們就可以把它們傳給Flotr2了。這里我們可以看到為什么Flotr2期望數據格式是數組了每一個分隔的數據集在數組中是一個對象。

Flotr.draw(

document.getElementById("chart"), [{ data: pacific, points: {show:true} },{ data: europe, points: {show:true} }, { data: americas, points: {show:true} },{ data: mideast, points: {show:true} }, { data: asia, points: {show:true} },{ data: us, points: {show:true} } ],{ title: "Life Expectancy vs. Health-Care Spending", subtitle: "(by country, 2010 OECD data)", xaxis: {min: 5, max: 20, tickDecimals: 0, title: "Spending as Percentage of GDP",tickFormatter: function(val) {return val+"%"}},yaxis: {min: 70, max: 85, tickDecimals: 0, title: "Years"} }

);

如圖1-19所示Flotr2用不同顏色表明不同的區域每個區域里是每個國家的數據。我們最后再提升一下表格的可讀性我們添加一個圖例來標明圖表中顏色代表的地區。

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: "Life Expectancy vs. Health-Care Spending (2010 OECD data)",
1 xaxis: {min: 5, max: 25, tickDecimals: 0,
　 title: "Spending as Percentage of GDP",
　 tickFormatter: function(val) {return val+"%"}},
2 yaxis: {min: 70, max: 85, tickDecimals: 0, title: "Years"},

legend: {position: "ne"}

　 }
　);

為了給圖例騰出空間我們在代碼1處增加了X軸的范圍并在代碼2處將圖例定位在圖表的右上角。圖1-20就是添加完后圖表的最終效果。**1.4.8　第8步　解決Flotr2的“bugs”**

總結

以上是生活随笔為你收集整理的《JavaScript数据可视化编程》——1.4 用离散图表绘制x/y值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。