AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
教程介紹如何在JavaScript HTML5中創建和編碼交互式雷達圖雷達圖（也稱為蜘蛛圖或雷達圖）是一種數據可視化，用于比較具有多個定量變量的觀測值。每個變量編碼為等距分開的輻條。值越高，指向圖表的中心越遠。雷達圖最適合用來比較觀測的“輪廓”并檢測數據中的異常值。因此，它們在體育運動中被大量使用，最顯著的是在籃球和足球中用于對運動員進行剖析。
沒錯，我們將構建雷達圖以對Bulbasaur，Charmander和Squirtle進行數據分析，從而一勞永逸地確定這是最佳選擇。
建立JavaScript雷達圖
為了建立雷達圖，我們將使用一個圖表庫。圖表庫消除了構建圖表的許多負擔（與d3.js之類的相比），使您可以快速輕松地獲取圖表。在本教程中，我選擇使用AnyChart JavaScript庫。我之所以選擇AnyChart，是因為使用它構建圖表非常快，并且由于文檔非常密集，它對于初學者來說是一個了不起的庫。
步驟1：設定頁面
創建雷達圖的第一步是設置html頁面并加載所需的腳本。
<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>
我在這里所做的全部工作是創建一個新的html頁面，添加了創建雷達圖anychart-core.min.js 和anychart- radar.min.js所需的腳本。前者是所有AnyChart圖表所必需的，并帶有基本圖表（散點圖，條形圖等），而后者為我們提供了構建雷達圖所需的模塊。
然后，我們為html頁面創建一個CSS規則，該規則設置圖表的大小。我們已經使用了100％的寬度和高度以及0的邊距來創建全屏數據，但是如果您希望進行其他操作，請將這些值更改為更適合您的需求。
最后，我們使用anychart.onDocumentReady()。我們的圖表將進入此功能。它的作用是僅在文檔準備就緒時才觸發該功能。
步驟2：載入資料
為了為我們的首發口袋妖怪繪制雷達圖，我們需要獲取數據。我在bulbapedia.bulbagarden.net上找到了它，它似乎具有每一個神奇寶貝的統計數據！
然后，我們需要將此數據重新格式化為AnyChart知道如何讀取的內容。AnyChart喜歡以下格式的每個觀測數據：
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},
];
對象數組，每個變量的x軸變量名為“ x”，y軸變量名為“ value”。在雷達圖的情況下，x軸變量是變量的名稱，而y軸變量是值。
我們對每個入門級口袋妖怪重復此步驟，得到以下三個數組：
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：繪制圖表
現在我們已經連續排好所有（偽裝）鴨子，是時候繪制圖表了。
// 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();
結果是：
這看起來不太有用嗎？不同的系列看起來都一樣。我們可以輕松解決此問題。如果我們更改最小和最大yScale值，我們將能夠更好地看到3個系列之間的差異。然后，將最大值設置為65，將最小值設置為35，然后根據要嘗試可視化的數據選擇這些值。如果我們其中一個口袋妖怪的變量值大于65或小于35，我會選擇其他值來適應該變量。
// 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>
現在我們可以區分我們的系列。
步驟4：自定義圖表
正如我上面顯示的那樣，通過更改圖表的某個方面，我使其更具吸引力和信息量。作為數據可視化開發人員，您的工作是使用所有可用的工具來幫助您更好地講述數據故事。
任何值得其關注的制圖庫都可以自定義其圖表，以使您更好地講述自己的故事。現在，我將介紹一些自定義技術，以從雷達圖中獲取更多信息。
電池顏色
使用雷達圖的缺點之一是很難比較不同變量之間的值（因為它們是循環定位而不是線性定位）。通過為交替的單元格著色以創建引用以更好地比較變量，我們可以在某種程度上減輕此缺點。
// 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);
重新排列變量
雷達圖的另一個問題是用戶傾向于看到相鄰變量之間的聯系，而事實并非如此。不幸的是，這還不能做很多事情，但是我們可以嘗試充分利用它并重新排列變量，以使更相關的變量彼此相鄰。這將進一步加強雷達圖的使用，以查看分析性“概況”。
在我們的示例中，我們將重新排列以下內容：
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 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},
];
如您所知，這更多的是藝術而不是科學。但是，如您在下面看到的，我們對不同的配置文件有了更好的了解。
<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更具進攻性，Squirtle更具防守性，而Bulbasaur更加全面。因此，我想說的是，使用這張圖表（我意識到這是一個反氣候結論），我們可以清楚地看到所有神奇寶貝都是正確的選擇。它們都非常平衡，各有優缺點。
結論
制作雷達圖顯然比大多數人想象的要容易得多，我認為結果非常酷并且引人入勝。但是，它們比其他數據可視化要難用，并且具有許多缺點。
如果變量太多，該圖表將變得難以閱讀。如果觀察值太多，建議將其分離到自己的圖表中。他們還需要所有變量具有相同的比例。還要注意，用戶傾向于將觀察區域視為價值的衡量標準，不幸的是，事實并非如此。
考慮到這些注意事項，我建議改用折線圖或條形圖。雷達圖真正閃耀的地方在于，在吸引用戶時，它們可能比折線圖和條形圖要強大得多，因此，在工作時，它們工作得很好！
想要購買Anychart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線