极坐标图通常看起来令人印象深刻，这让一些人认为创建它们是一个需要大量技能和专业知识的棘手过程。下面将向您展示如何在漂亮的交互式 JavaScript 极坐标图中轻松可视化数据。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。
AnyChart最新版
初始极地图结果
瞧，这几行代码就准备好了一个基于 JavaScript 的交互式极坐标图！
在此处查看此初始版本，并在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> <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 () { // 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); // 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)'); // set the chart container id chart.container('container'); // initiate the chart display chart.draw(); }); </script> </body></html>
这样的极坐标图让人很清楚，根据最新的DVS调查，Microsoft Excel是最流行的数据可视化技术，其次是Tableau、pen & paper和R。
实际上，这只是一个基本版本。我们可以添加很多东西。跟随我演示如何自定义此（以及基本上任何其他）JS 极坐标图以获得更实用和更时髦的表示！
自定义 JS 极坐标图
有多种方法可以自定义这样的极坐标图。现在，我将向您展示如何进行一些快速而有效的调整。
A.修改点的宽度
可以根据您的喜好更改和设置点的默认宽度。我想减少它以使极坐标图看起来像一组花瓣。这只需一行代码即可轻松完成：
// set the width of the series pointschart.pointWidth(10);
B. 改进工具提示和标题
然后，我想修改极坐标图的默认工具提示，使其更具洞察力。由于这些值是百分比数字，我在它们旁边添加了百分比符号：
// set the tooltipchart.tooltip().format("{%value}%");
接下来，我只是在图表标题的底部添加一些填充：
// configure the chart titlechart .title() .enabled(true) .text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)') .padding({ bottom: 20 });
您可以在AnyChart Playground或CodePen上查看此 JavaScript 极坐标图迭代的完整代码。
C. 添加第二个系列
我决定看看这些数据可视化技术的使用发生了怎样的变化，并为此添加了 2019 年的数据，使极坐标图的信息量更大，并从数据分析的角度为其带来更多价值。
因此，我包含了2019 年的数据，并为每年的数据提供了data1 （2020 年）和data2 （2019 年）的变量名称。同样，我将两个数据集连接到两个系列，并为每个系列命名。看看它是如何完成的：
// data for 2020var 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 2019var 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 }]// create two series and connect the data respectivelyvar columnSeries2 = chart.column(data2);var columnSeries1 = chart.column(data1);// set the series names// series #1columnSeries1.name('2020');// series #2columnSeries2.name('2019');
我保持先前定义的原始 2020 系列的宽度，并使 2019 系列更宽一些，以便在视觉上更容易区分它们：
// set the width of the series points// series #1columnSeries1.pointWidth(10);// series #2columnSeries2.pointWidth(15);
D. 改变颜色
现在，我想为每个系列设置不同的颜色，我选择三种主要 DVS 颜色中的两种：绿松石 (#2db1a4) 和梅花 (#9f5f9c)。稍后将使用第三种颜色。
// customize the series color// series #1columnSeries1.color('#2db1a4');// series #2columnSeries2.color('#9f5f9c');
AnyChart JavaScript 图表库提供了多个预先构建的主题。为了使用 DVS 颜色使极坐标图看起来更加生动，我设置了一个深色主题，即 Dark Glamour。因此，我在该<head>部分中添加了必要的脚本，然后在主 JS 代码中包含了主题。像这样：
<script src="https://cdn.anychart.com/releases/8.10.0/themes/dark_glamour.min.js"></script>...// set the chart design themeanychart.theme('darkGlamour');
E. 增强标签、工具提示和标题
这是我使用 DVS 标志的第三种颜色芥末色的地方。我通过为每个设置此颜色并更改字体大小参数以提高易读性来修改极坐标图标签：
// configure the chart labelsvar labels = chart.xAxis().labels();labels.fontSize(14) .fontColor('#dcb22a');
接下来，我修改工具提示以反映每个系列的颜色以及标签，使其看起来更吸引人：
// set the tooltip titlechart.tooltip().title().fontColor('#dcb22a');// set the tooltip contentchart.tooltip().format("{%seriesName}: {%value}%").fontSize(14).fontWeight(600);// set the tooltip font color// series #1columnSeries1.tooltip().fontColor('#2db1a4')// series #2columnSeries2.tooltip().fontColor('#9f5f9c');
最后，我修改极坐标图标题以包含年份并自定义其字体大小和颜色以增强外观：
// configure the chart titlechart .title() .enabled(true) .text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)') .fontSize(16) .fontColor("#d5dcdc") .padding({ bottom: 20 });
更多AnyChart相关资源，请点击此处进行查看~ 想要购买AnyChart正版授权的朋友可以咨询官方客服。
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！