AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
點(diǎn)擊下載AnyChart正式版
教程介紹如何在JavaScript HTML5中創(chuàng)建和編碼交互式雷達(dá)圖雷達(dá)圖（也稱為蜘蛛圖或雷達(dá)圖）是一種數(shù)據(jù)可視化，用于比較具有多個(gè)定量變量的觀測(cè)值。每個(gè)變量編碼為等距分開的輻條。值越高，指向圖表的中心越遠(yuǎn)。雷達(dá)圖最適合用來比較觀測(cè)的“輪廓”并檢測(cè)數(shù)據(jù)中的異常值。因此，它們?cè)隗w育運(yùn)動(dòng)中被大量使用，最顯著的是在籃球和足球中用于對(duì)運(yùn)動(dòng)員進(jìn)行剖析。
沒錯(cuò)，我們將構(gòu)建雷達(dá)圖以對(duì)Bulbasaur，Charmander和Squirtle進(jìn)行數(shù)據(jù)分析，從而一勞永逸地確定這是最佳選擇。
建立JavaScript雷達(dá)圖
為了建立雷達(dá)圖，我們將使用一個(gè)圖表庫(kù)。圖表庫(kù)消除了構(gòu)建圖表的許多負(fù)擔(dān)（與d3.js之類的相比），使您可以快速輕松地獲取圖表。在本教程中，我選擇使用AnyChart JavaScript庫(kù)。我之所以選擇AnyChart，是因?yàn)槭褂盟鼧?gòu)建圖表非常快，并且由于文檔非常密集，它對(duì)于初學(xué)者來說是一個(gè)了不起的庫(kù)。
步驟1：設(shè)定頁(yè)面
創(chuàng)建雷達(dá)圖的第一步是設(shè)置html頁(yè)面并加載所需的腳本。
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// drawing our chart goes here
});
</script>
</body>
</html>
我在這里所做的全部工作是創(chuàng)建一個(gè)新的html頁(yè)面，添加了創(chuàng)建雷達(dá)圖anychart-core.min.js 和anychart- radar.min.js所需的腳本。前者是所有AnyChart圖表所必需的，并帶有基本圖表（散點(diǎn)圖，條形圖等），而后者為我們提供了構(gòu)建雷達(dá)圖所需的模塊。
然后，我們?yōu)閔tml頁(yè)面創(chuàng)建一個(gè)CSS規(guī)則，該規(guī)則設(shè)置圖表的大小。我們已經(jīng)使用了100％的寬度和高度以及0的邊距來創(chuàng)建全屏數(shù)據(jù)，但是如果您希望進(jìn)行其他操作，請(qǐng)將這些值更改為更適合您的需求。
最后，我們使用anychart.onDocumentReady()。我們的圖表將進(jìn)入此功能。它的作用是僅在文檔準(zhǔn)備就緒時(shí)才觸發(fā)該功能。
步驟2：載入資料
為了為我們的首發(fā)口袋妖怪繪制雷達(dá)圖，我們需要獲取數(shù)據(jù)。我在bulbapedia.bulbagarden.net上找到了它，它似乎具有每一個(gè)神奇寶貝的統(tǒng)計(jì)數(shù)據(jù)！
然后，我們需要將此數(shù)據(jù)重新格式化為AnyChart知道如何讀取的內(nèi)容。AnyChart喜歡以下格式的每個(gè)觀測(cè)數(shù)據(jù)：
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
對(duì)象數(shù)組，每個(gè)變量的x軸變量名為“ x”，y軸變量名為“ value”。在雷達(dá)圖的情況下，x軸變量是變量的名稱，而y軸變量是值。
我們對(duì)每個(gè)入門級(jí)口袋妖怪重復(fù)此步驟，得到以下三個(gè)數(shù)組：
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
var data2 = [
{x: "HP", value: 45},
{x: "Attack", value: 49},
{x: "Defense", value: 49},
{x: "Special Attack", value: 65},
{x: "Special Defense", value: 65},
{x: "Speed", value: 45},
];
var data3 = [
{x: "HP", value: 44},
{x: "Attack", value: 48},
{x: "Defense", value: 65},
{x: "Special Attack", value: 50},
{x: "Special Defense", value: 64},
{x: "Speed", value: 43},
];
步驟3：繪制圖表
現(xiàn)在我們已經(jīng)連續(xù)排好所有（偽裝）鴨子，是時(shí)候繪制圖表了。
// create radar chart
var chart = anychart.radar();
// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set chart yScale settings
chart.yScale()
.minimum(0)
.maximum(100)
.ticks({'interval':20});
// create first series
chart.line(data1)
// create second series
chart.line(data2)
// create third series
chart.line(data3)
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
結(jié)果是：
這看起來不太有用嗎？不同的系列看起來都一樣。我們可以輕松解決此問題。如果我們更改最小和最大yScale值，我們將能夠更好地看到3個(gè)系列之間的差異。然后，將最大值設(shè)置為65，將最小值設(shè)置為35，然后根據(jù)要嘗試可視化的數(shù)據(jù)選擇這些值。如果我們其中一個(gè)口袋妖怪的變量值大于65或小于35，我會(huì)選擇其他值來適應(yīng)該變量。
// set chart yScale settings
chart.yScale()
.minimum(35)
.maximum(65)
.ticks({'interval':5});
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
anychart.onDocumentReady(function () {
// our data from bulbapedia
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
var data2 = [
{x: "HP", value: 45},
{x: "Attack", value: 49},
{x: "Defense", value: 49},
{x: "Special Attack", value: 65},
{x: "Special Defense", value: 65},
{x: "Speed", value: 45},
];
var data3 = [
{x: "HP", value: 44},
{x: "Attack", value: 48},
{x: "Defense", value: 65},
{x: "Special Attack", value: 50},
{x: "Special Defense", value: 64},
{x: "Speed", value: 43},
];
// create radar chart
var chart = anychart.radar();
// set chart yScale settings
chart.yScale()
.minimum(35)
.maximum(65)
.ticks({'interval':5});
// create first series
chart.line(data1)
// create second series
chart.line(data2)
// create third series
chart.line(data3)
// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</html>
現(xiàn)在我們可以區(qū)分我們的系列。
步驟4：自定義圖表
正如我上面顯示的那樣，通過更改圖表的某個(gè)方面，我使其更具吸引力和信息量。作為數(shù)據(jù)可視化開發(fā)人員，您的工作是使用所有可用的工具來幫助您更好地講述數(shù)據(jù)故事。
任何值得其關(guān)注的制圖庫(kù)都可以自定義其圖表，以使您更好地講述自己的故事。現(xiàn)在，我將介紹一些自定義技術(shù)，以從雷達(dá)圖中獲取更多信息。
電池顏色
使用雷達(dá)圖的缺點(diǎn)之一是很難比較不同變量之間的值（因?yàn)樗鼈兪茄h(huán)定位而不是線性定位）。通過為交替的單元格著色以創(chuàng)建引用以更好地比較變量，我們可以在某種程度上減輕此缺點(diǎn)。
// color alternating cells
chart.yGrid().palette(["gray 0.1", "gray 0.2"]);
該代碼將雷達(dá)單元變成灰色，而交替的單元具有不同的不透明度*。
*使用不透明度是眾所周知的技巧，可以使不同的顏色完美搭配。
面積，填充，描邊和圖例
為了更好地描述我們的不同系列，我將系列類型從線條更改為區(qū)域。這將使我們能夠更改多邊形的填充。我還將更改每個(gè)系列的顏色，以更好地表示所討論的神奇寶貝。
// create first series
chart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")
// create second series
chart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")
// create third series
chart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")
一個(gè)傳說也可以讓我們分辨出哪個(gè)系列。
// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set legend
.legend(true);
重新排列變量
雷達(dá)圖的另一個(gè)問題是用戶傾向于看到相鄰變量之間的聯(lián)系，而事實(shí)并非如此。不幸的是，這還不能做很多事情，但是我們可以嘗試充分利用它并重新排列變量，以使更相關(guān)的變量彼此相鄰。這將進(jìn)一步加強(qiáng)雷達(dá)圖的使用，以查看分析性“概況”。
在我們的示例中，我們將重新排列以下內(nèi)容：
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
對(duì)此
var data1 = [
{x: "Speed", value: 65},
{x: "HP", value: 39},
{x: "Defense", value: 43},
{x: "Special Defense", value: 50},
{x: "Special Attack", value: 60},
{x: "Attack", value: 52},
];
如您所知，這更多的是藝術(shù)而不是科學(xué)。但是，如您在下面看到的，我們對(duì)不同的配置文件有了更好的了解。
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
anychart.onDocumentReady(function () {
// our data from bulbapedia
var data1 = [
{x: "Speed", value: 65},
{x: "HP", value: 39},
{x: "Defense", value: 43},
{x: "Special Defense", value: 50},
{x: "Special Attack", value: 60},
{x: "Attack", value: 52}
];
var data2 = [
{x: "Speed", value: 45},
{x: "HP", value: 45},
{x: "Defense", value: 49},
{x: "Special Defense", value: 65},
{x: "Special Attack", value: 65},
{x: "Attack", value: 49}
];
var data3 = [
{x: "Speed", value: 43},
{x: "HP", value: 44},
{x: "Defense", value: 65},
{x: "Special Defense", value: 64},
{x: "Special Attack", value: 50},
{x: "Attack", value: 48}
];
// create radar chart
var chart = anychart.radar();
// set chart yScale settings
chart.yScale()
.minimum(35)
.maximum(65)
.ticks({'interval':5});
// color alternating cells
chart.yGrid().palette(["gray 0.1", "gray 0.2"]);
// create first series
chart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")
// create second series
chart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")
// create third series
chart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")
// set chart title
chart.title("Starter Pokemon Comparison Chart")
// set legend
.legend(true);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</html>
我們可以清楚地看到Charmander更具進(jìn)攻性，Squirtle更具防守性，而Bulbasaur更加全面。因此，我想說的是，使用這張圖表（我意識(shí)到這是一個(gè)反氣候結(jié)論），我們可以清楚地看到所有神奇寶貝都是正確的選擇。它們都非常平衡，各有優(yōu)缺點(diǎn)。
結(jié)論
制作雷達(dá)圖顯然比大多數(shù)人想象的要容易得多，我認(rèn)為結(jié)果非常酷并且引人入勝。但是，它們比其他數(shù)據(jù)可視化要難用，并且具有許多缺點(diǎn)。
如果變量太多，該圖表將變得難以閱讀。如果觀察值太多，建議將其分離到自己的圖表中。他們還需要所有變量具有相同的比例。還要注意，用戶傾向于將觀察區(qū)域視為價(jià)值的衡量標(biāo)準(zhǔn)，不幸的是，事實(shí)并非如此。
考慮到這些注意事項(xiàng)，我建議改用折線圖或條形圖。雷達(dá)圖真正閃耀的地方在于，在吸引用戶時(shí)，它們可能比折線圖和條形圖要強(qiáng)大得多，因此，在工作時(shí)，它們工作得很好！
想要購(gòu)買Anychart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營(yíng) 
21次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線