AnyChart是基于JavaScript (HTML5) 的图表控件。使用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 极坐标图可视化的可能性以及如何使用极坐标代替序数刻度的工作。