欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

AnyChart教程：JavaScript极坐标图的制作方法(第二部分)

最编程 2024-08-02 13:12:40
...

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

点击下载AnyChart最新版

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

初始极地图结果

瞧，这几行代码就准备好了一个基于 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>

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

这样的极坐标图让人很清楚，根据最新的DVS调查，Microsoft Excel是最流行的数据可视化技术，其次是Tableau、pen & paper和R。

实际上，这只是一个基本版本。我们可以添加很多东西。跟随我演示如何自定义此（以及基本上任何其他）JS 极坐标图以获得更实用和更时髦的表示！

自定义 JS 极坐标图

有多种方法可以自定义这样的极坐标图。现在，我将向您展示如何进行一些快速而有效的调整。

A.修改点的宽度

可以根据您的喜好更改和设置点的默认宽度。我想减少它以使极坐标图看起来像一组花瓣。这只需一行代码即可轻松完成：

// set the width of the series points
chart.pointWidth(10);

B. 改进工具提示和标题

然后，我想修改极坐标图的默认工具提示，使其更具洞察力。由于这些值是百分比数字，我在它们旁边添加了百分比符号：

// set the tooltip
chart.tooltip().format("{%value}%");

接下来，我只是在图表标题的底部添加一些填充：

// configure the chart title
chart
    .title()
    .enabled(true)
    .text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)')
    .padding({ bottom: 20 });

您可以在AnyChart Playground或CodePen上查看此 JavaScript 极坐标图迭代的完整代码。

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

C. 添加第二个系列

我决定看看这些数据可视化技术的使用发生了怎样的变化，并为此添加了 2019 年的数据，使极坐标图的信息量更大，并从数据分析的角度为其带来更多价值。

因此，我包含了2019 年的数据，并为每年的数据提供了data1 （2020 年）和data2 （2019 年）的变量名称。同样，我将两个数据集连接到两个系列，并为每个系列命名。看看它是如何完成的：

// 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 }
]
 
// create two 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');

我保持先前定义的原始 2020 系列的宽度，并使 2019 系列更宽一些，以便在视觉上更容易区分它们：

// set the width of the series points
// series #1
columnSeries1.pointWidth(10);
// series #2
columnSeries2.pointWidth(15);

D. 改变颜色

现在，我想为每个系列设置不同的颜色，我选择三种主要 DVS 颜色中的两种：绿松石 (#2db1a4) 和梅花 (#9f5f9c)。稍后将使用第三种颜色。

// customize the series color
// series #1
columnSeries1.color('#2db1a4');
// series #2
columnSeries2.color('#9f5f9c');

AnyChart JavaScript 图表库提供了多个预先构建的主题。为了使用 DVS 颜色使极坐标图看起来更加生动，我设置了一个深色主题，即 Dark Glamour。因此，我在该部分中添加了必要的脚本，然后在主 JS 代码中包含了主题。像这样：

<script src="https://cdn.anychart.com/releases/8.10.0/themes/dark_glamour.min.js"></script>

...

// set the chart design theme
anychart.theme('darkGlamour');

E. 增强标签、工具提示和标题

这是我使用 DVS 标志的第三种颜色芥末色的地方。我通过为每个设置此颜色并更改字体大小参数以提高易读性来修改极坐标图标签：

// 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 });

​

上一篇： 玩转坐标系：极坐标与直角坐标详解

下一篇： 极坐标方程画图

推荐阅读