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

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

概述：極坐標圖通常看起來令人印象深刻，這讓一些人認為創建它們是一個需要大量技能和專業知識的棘手過程。下面將向您展示如何在漂亮的交互式 JavaScript 極坐標圖中輕松可視化數據。

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。

點擊下載AnyChart最新版

初始極地圖結果

瞧，這幾行代碼就準備好了一個基于 JavaScript 的交互式極坐標圖！

在此處查看此初始版本，并在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>
    <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 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。因此，我在該<head>部分中添加了必要的腳本，然后在主 JS 代碼中包含了主題。像這樣：

<script src="http://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 });

更多AnyChart相關資源，請點擊此處進行查看~ 想要購買AnyChart正版授權的朋友可以。