极坐标图通常看起来令人印象深刻，这让一些人认为创建它们是一个需要大量技能和专业知识的棘手过程。下面将向您展示如何在漂亮的交互式 JavaScript 极坐标图中轻松可视化数据。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、 表、数据分析、统计学、金融等领域。
AnyChart最新版
最终极地图结果
就是这样！一个绝对令人惊叹且富有洞察力的 JavaScript 极坐标图已完成！
我们看到，数据可视化的顶级技术在这两年中基本保持不变。但是 2020 年 15 项技术中的大多数百分比低于 2019 年，这暗示了前 15 项技术之外的技术的增长。唯一的例外是 Power BI，其使用量有所增加。Matplotlib 的使用量在 2020 年与 2019 年大致相同。
查看下面这个最终交互式 JS 极坐标图的完整代码，并随时在AnyChart Playground或CodePen上尝试一些实验。
<html><head> <title>JavaScript Polar Chart</title> <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script> <script src="https://cdn.anychart.com/releases/8.10.0/themes/dark_glamour.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 () { // set the chart design theme anychart.theme('darkGlamour'); // create a polar chart var chart = anychart.polar(); // data for 2020 var data1 = [ { 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: 'ggplot2', value: 19.8 }, { x: 'Illustrator', value: 20.3 }, { 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 } ]; // data for 2019 var data2 = [ { x: 'Excel', value: 54.7 }, { x: 'Tableau', value: 44.3 }, { x: 'R', value: 37.7 }, { x: 'Python', value: 34.2 }, { x: 'D3.js', value: 33.6 }, { x: 'ggplot2', value: 32.3 }, { x: 'Pen & Paper', value: 30.1 }, { x: 'Illustrator', value: 25.3 }, { x: 'Power BI', value: 17.3 }, { x: 'Plotly', value: 16.1 }, { x: 'Mapbox', value: 15.1 }, { x: 'QGIS', value: 12.9 }, { x: 'Matplotlib', value: 11.1 }, { x: 'ArcGIS', value: 10.2 }, { x: 'React', value: 10.1 } ]; // set the x-scale chart.xScale('ordinal'); // disable the y-axis chart.yAxis(false); // create two column series and connect the data respectively var columnSeries2 = chart.column(data2); var columnSeries1 = chart.column(data1); // set the series names // series #1 columnSeries1.name('2020'); // series #2 columnSeries2.name('2019'); // set the width of the series points // series #1 columnSeries1.pointWidth(10); // series #2 columnSeries2.pointWidth(15); // customize the series color // series #1 columnSeries1.color('#2db1a4'); // series #2 columnSeries2.color('#9f5f9c'); // configure the chart labels var labels = chart.xAxis().labels(); labels.fontSize(14) .fontColor("#dcb22a"); // set the tooltip title chart.tooltip().title().fontColor('#dcb22a'); // set the tooltip content chart.tooltip().format("{%seriesName}: {%value}%").fontSize(14).fontWeight(600); // set the tooltip font color // series #1 columnSeries1.tooltip().fontColor('#2db1a4') // series #2 columnSeries2.tooltip().fontColor('#9f5f9c'); // configure the chart title chart .title() .enabled(true) .text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)') .fontSize(16) .fontColor("#d5dcdc") .padding({ bottom: 20 }); // set the chart container id chart.container('container'); // initiate the chart display chart.draw(); }); </script></body></html>
结论
极坐标图是一种非常酷的数据可视化类型。即使你是初学者，用 JS 创造一个漂亮的交互式也不是那么困难。不要错过极坐标图文档， 以了解更多关于 JavaScript 极坐标图可视化的可能性以及如何使用极坐标代替序数刻度的工作。
更多AnyChart相关资源，请点击此处进行查看~ 想要购买AnyChart正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！