AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart最新版
極坐標圖通常看起來令人印象深刻，這讓一些人認為創建它們是一個需要大量技能和專業知識的棘手過程。下面將向您展示如何在漂亮的交互式 JavaScript 極坐標圖中輕松可視化數據。
從根本上說， 極坐標圖是用極坐標繪制的圓形圖的變體。它也可以很好地將某些類別的數據可視化以進行比較，這正是我現在想要演示的情況。在本教程中，我將構建一個柱狀極坐標圖，條形圖從圖表的中心開始生長，以用它們的長度來表示值。
數據可視化協會(DVS) 每年都會對數據可視化 從業者進行行業現狀調查，我認為這可能是利用其最新數據的絕佳機會。特別是，我想根據響應查看用于數據可視化的最流行技術。因此，在這里，我將制作一個 JS 極坐標圖，繪制前 15 個極坐標圖，構成一個很酷的說明性真實世界示例。
JS 極坐標圖預覽
偷看一下最終的 JavaScript 極坐標圖會是什么樣子：
通過 4 個簡單步驟構建 JavaScript 極坐標圖
為了在此處創建極坐標圖，我將使用 JavaScript 圖表庫。此類庫配備了用于基本功能的預先編寫的代碼，這使得創建數據可視化變得更加容易和快捷。
在本教程中，我選擇了AnyChart JavaScript 庫，因為它易于使用、靈活且可免費用于非商業用途。此外，它是一個很棒的庫，因為有很多示例和良好的文檔。
一般來說，可以將創建任何 JS 圖形（包括極坐標圖）的整個過程分為四個基本步驟或階段。他們是：
-
用 HTML 創建一個基本的網頁。
-
引用所需的 JavaScript 文件。
-
添加數據。
-
編寫一些JS代碼來繪制圖表。
和我一起按照這些步驟制作一個很棒的基于 JavaScript 的交互式極坐標圖可視化！
1.用HTML創建一個基本的網頁
首先，我創建了一個基本的 HTML 頁面和一個用于保存極坐標圖的塊元素：
<html>
<head>
<title>JavaScript Polar Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
如您所見，該<div>元素被賦予了一個 id，以便我稍后在代碼中引用它。此外，<div> 塊的寬度和高度指定為 100%，以使極坐標圖在整個頁面上呈現。
2. 引用所需的 JavaScript 文件
接下來，在<head>頁面的部分中，我引用了正在使用的圖表庫的特定腳本。
在這里，我正在使用 AnyChart，因此我將從其CDN 中包含所需的文件 。該庫是模塊化的，對于極坐標圖，我只需要方便的 核心和極坐標模塊。
<html>
<head>
<title>JavaScript Polar Chart</title>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-polar.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>
// All the JS polar chart code will come here.
</script>
</body>
</html>
3. 添加數據
為了為我未來的極坐標圖獲取數據集，我過濾了 DVS 的2020 年數據可視化人口普查調查數據，并確定了受訪者回答的 15 種最常用的技術。
現在，為了將此數據正確添加到圖表中，我創建了一個 以類別名稱作為參數的數組x，因為我們在 X 軸上繪圖，并將每個類別的度量作為value參數。
// add data as an array of objects
var data = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
準備工作已全部完成，現在是讓基于 JavaScript 的極坐標圖顯示在畫布上的時候了！
4.編寫一些JS代碼來繪制極坐標圖
我在這里做的第一件事是添加一個包含所有 JS 極坐標圖代碼的函數。這確保其中的所有內容僅在網頁準備好后才會執行。
在 JavaScript 中制作極坐標圖非常簡單。我只寫一行代碼來創建它，然后添加上一步準備好的數據數組，并將數據連接到圖表創建一個列系列。
anychart.onDocumentReady(function () {
// create a polar chart
var chart = anychart.polar();
// add data as an array of objects
var data = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
// connect the data creating a column series
var columnSeries = chart.column(data);
});
數據是分類的，由離散值組成。所以我將 X-scale 指定為序數。我還將 Y 軸設置為“false”以避免顯示相應的值。
// set the x-scale
chart.xScale('ordinal');
// disable the y-axis
chart.yAxis(false);
命名圖表總是很重要的，這樣查看者就可以毫無問題地快速理解所顯示的內容。所以，我設置了極坐標圖標題：
// set the chart title
chart
.title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');
最后，我參考之前添加的<div>容器和命令來顯示生成的極坐標圖。
// set the chart container id
chart.container('container');
// initiate the chart display
chart.draw();
更多AnyChart相關資源，請點擊此處進行查看~ 想要購買AnyChart正版授權的朋友可以。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線