?圖表控件AnyChart教程：如何制作 JavaScript 極坐標圖（三）

翻譯|使用教程|編輯：張瑩心|2021-11-26 10:25:29.530|閱讀 243 次

概述：極坐標圖通常看起來令人印象深刻，這讓一些人認為創建它們是一個需要大量技能和專業知識的棘手過程。下面將向您展示如何在漂亮的交互式 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="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
  <script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script>
  <script src="http://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>