《Web 2.0界面設(shè)計(jì)模式》第4章數(shù)據(jù)呈現(xiàn)的設(shè)計(jì)模式，本章著重于數(shù)據(jù)呈現(xiàn)這一方面，結(jié)合實(shí)際的例子分別介紹了信息提示、表格、按需加載和圖表等數(shù)據(jù)呈現(xiàn)模式，以及針對(duì)這些呈現(xiàn)模式的Dojo源代碼實(shí)現(xiàn)。本節(jié)為大家介紹雷達(dá)圖。
AD：
4.4.5 雷達(dá)圖（1）
1．模式簡介
雷達(dá)圖也稱為蜘蛛圖、蛛網(wǎng)圖、星狀圖、極區(qū)圖，是一種以二維形式展示多維數(shù)據(jù)的圖形。雷達(dá)圖從中心點(diǎn)出發(fā)輻射出多條坐標(biāo)軸（至少大于三條），每一份多維數(shù)據(jù)在每一維度上的數(shù)值都占用一條坐標(biāo)軸，并和相鄰坐標(biāo)軸上的數(shù)據(jù)點(diǎn)連接起來，形成一個(gè)不規(guī)則多邊形。如果將相鄰坐標(biāo)軸上的刻度點(diǎn)也連接起來以便于讀取數(shù)值，整個(gè)圖形形似蜘蛛網(wǎng)，或雷達(dá)儀表盤，因此得名。
2．應(yīng)用場景
雷達(dá)圖的一個(gè)典型應(yīng)用是顯示對(duì)象在各種指標(biāo)上的強(qiáng)弱。由于其天生具有多條坐標(biāo)軸，因此能輕易地處理不同維度單位不同的情況。另外，即使在每個(gè)維度單位、范圍相同的情況下，雷達(dá)圖也比傳統(tǒng)的條形圖具有更強(qiáng)的視覺沖擊力，能給枯燥單調(diào)的數(shù)據(jù)增色不少，如圖4-39所示。
雷達(dá)圖特別適合于展示在某個(gè)屬性上特別突出的對(duì)象，也可以突出在所有屬性上數(shù)值都較大的對(duì)象。但一般而言，雷達(dá)圖不太適合比較不同屬性的值，這是因?yàn)槿搜蹖?duì)于成角度的線段長度差異并不敏感。例如圖4-40中"音效"和"支持格式"屬性在數(shù)值上有差異，但不容易直觀地從圖形上看出來。
3．解決方案
在雷達(dá)圖中，我們把擁有一組屬性的對(duì)象稱為環(huán)，為了更清楚地分辨疊加在一起的環(huán)上的各項(xiàng)數(shù)值，每一環(huán)一般都有懸停高亮的功能，如圖4-41所示。
另外，當(dāng)一個(gè)雷達(dá)圖中包含多個(gè)環(huán)而難以分辨時(shí)，通過可交互的圖例來開關(guān)雷達(dá)圖中的環(huán)是被廣泛應(yīng)用的解決方案。如圖4-42所示，通過點(diǎn)擊圖例中的Series 1圖標(biāo)可關(guān)閉雷達(dá)圖中代表Series 1的藍(lán)色環(huán)對(duì)象，使得留下的Series 2環(huán)對(duì)象更清楚。
4.4.5 雷達(dá)圖（2）
4．應(yīng)用實(shí)例
在雷達(dá)圖中，每個(gè)環(huán)對(duì)象都作為一個(gè)數(shù)據(jù)列表，包含了各項(xiàng)屬性值。下面是使用dojox.charting繪制雷達(dá)圖的實(shí)例：
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.plot2d.Spider");
dojo.require("dojox.charting.themes.PlotKit.blue");
dojo.require("dojox.charting.widget.SelectableLegend");
dojo.ready(function(){
var chart = new dojox.charting.Chart("chartNode");
chart.setTheme(dojox.charting.themes.PlotKit.blue);
chart.addPlot("default", {
type: "Spider",
divisions: 7 //標(biāo)尺上的刻度數(shù)量
});
//除了為環(huán)對(duì)象設(shè)置對(duì)應(yīng)的數(shù)據(jù)對(duì)象(data)外，還要設(shè)置顏色（fill）
chart.addSeries("China",
{data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth":
12}},
{fill: "blue" });
chart.addSeries("France",
{data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}},
{fill: "red" });
chart.addSeries("USA",
{data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}},
{fill: "green" });
chart.addSeries("Japan",
{data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth":
2}},
{fill: "yellow" });
chart.addSeries("Korean",
{data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth":
18}},
{fill: "orange" });
chart.addSeries("Canada",
{data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}},
{fill: "purple" });
chart.render();
//SelectableLegend是dojox.charing中的可交互圖例控件
var legend = new dojox.charting.widget.SelectableLegend({chart: chart1, horizontal: false}, "legendNode");
});
圖4-43是dojox.charting繪制的雷達(dá)圖，可以點(diǎn)擊圖例中的勾選框開啟或關(guān)閉雷達(dá)圖中對(duì)應(yīng)的環(huán)。
4.5 小結(jié)
本章著重于數(shù)據(jù)呈現(xiàn)這一方面，結(jié)合實(shí)際的例子分別介紹了信息提示、表格、按需加載和圖表等數(shù)據(jù)呈現(xiàn)模式，以及針對(duì)這些呈現(xiàn)模式的Dojo源代碼實(shí)現(xiàn)。好的數(shù)據(jù)呈現(xiàn)模式能將繁雜的數(shù)據(jù)以清晰高效的方式展現(xiàn)出來，使用戶迅速準(zhǔn)確地捕捉到自己想要的信息，極大程度地提升用戶體驗(yàn)。數(shù)據(jù)呈現(xiàn)的設(shè)計(jì)直接關(guān)系到用戶是否能在最短的時(shí)間內(nèi)正確并且全面地理解網(wǎng)站的數(shù)據(jù)內(nèi)容，讀者可結(jié)合之前介紹的各種數(shù)據(jù)呈現(xiàn)模式的特點(diǎn)選取適合自己的模式并使用相應(yīng)的實(shí)現(xiàn)方案。
