图表控件AnyChart教程：如何制作 JavaScript 极坐标图（一）-控件新闻-慧都网

图表控件AnyChart教程：如何制作 JavaScript 极坐标图（一）

翻译|使用教程|编辑：张莹心|2021-11-26 10:19:12.770|阅读 189 次

概述：极坐标图通常看起来令人印象深刻，这让一些人认为创建它们是一个需要大量技能和专业知识的棘手过程。下面将向您展示如何在漂亮的交互式 JavaScript 极坐标图中轻松可视化数据。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

点击下载AnyChart最新版

极坐标图通常看起来令人印象深刻，这让一些人认为创建它们是一个需要大量技能和专业知识的棘手过程。下面将向您展示如何在漂亮的交互式 JavaScript 极坐标图中轻松可视化数据。

从根本上说，极坐标图是用极坐标绘制的圆形图的变体。它也可以很好地将某些类别的数据可视化以进行比较，这正是我现在想要演示的情况。在本教程中，我将构建一个柱状极坐标图，条形图从图表的中心开始生长，以用它们的长度来表示值。

数据可视化协会(DVS) 每年都会对数据可视化从业者进行行业现状调查，我认为这可能是利用其最新数据的绝佳机会。特别是，我想根据响应查看用于数据可视化的最流行技术。因此，在这里，我将制作一个 JS 极坐标图，绘制前 15 个极坐标图，构成一个很酷的说明性真实世界示例。

JS 极坐标图预览

偷看一下最终的 JavaScript 极坐标图会是什么样子：

图表控件AnyChart教程：如何制作 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="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//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@cahobeh.cn

上一篇：图表控件AnyChart教程：如何制作 JavaScript 极坐标图（二）下一篇：New！DevExpress ASP.NET v21.2新版本系统环境配置要求

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群