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

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

概述：極坐標(biāo)圖通常看起來(lái)令人印象深刻，這讓一些人認(rèn)為創(chuàng)建它們是一個(gè)需要大量技能和專業(yè)知識(shí)的棘手過(guò)程。下面將向您展示如何在漂亮的交互式 JavaScript 極坐標(biāo)圖中輕松可視化數(shù)據(jù)。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。

點(diǎn)擊下載AnyChart最新版

圖表控件AnyChart教程：如何制作 JavaScript 極坐標(biāo)圖

初始極地圖結(jié)果

瞧，這幾行代碼就準(zhǔn)備好了一個(gè)基于 JavaScript 的交互式極坐標(biāo)圖！

在此處查看此初始版本，并在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>

這樣的極坐標(biāo)圖讓人很清楚，根據(jù)最新的DVS調(diào)查，Microsoft Excel是最流行的數(shù)據(jù)可視化技術(shù)，其次是Tableau、pen &; paper和R。

實(shí)際上，這只是一個(gè)基本版本。我們可以添加很多東西。跟隨我演示如何自定義此（以及基本上任何其他）JS 極坐標(biāo)圖以獲得更實(shí)用和更時(shí)髦的表示！

自定義 JS 極坐標(biāo)圖

有多種方法可以自定義這樣的極坐標(biāo)圖。現(xiàn)在，我將向您展示如何進(jìn)行一些快速而有效的調(diào)整。

A.修改點(diǎn)的寬度

可以根據(jù)您的喜好更改和設(shè)置點(diǎn)的默認(rèn)寬度。我想減少它以使極坐標(biāo)圖看起來(lái)像一組花瓣。這只需一行代碼即可輕松完成：

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

B. 改進(jìn)工具提示和標(biāo)題

然后，我想修改極坐標(biāo)圖的默認(rèn)工具提示，使其更具洞察力。由于這些值是百分比數(shù)字，我在它們旁邊添加了百分比符號(hào)：

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

接下來(lái)，我只是在圖表標(biāo)題的底部添加一些填充：

// 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 極坐標(biāo)圖迭代的完整代碼。
圖表控件AnyChart教程：如何制作 JavaScript 極坐標(biāo)圖

C. 添加第二個(gè)系列

我決定看看這些數(shù)據(jù)可視化技術(shù)的使用發(fā)生了怎樣的變化，并為此添加了 2019 年的數(shù)據(jù)，使極坐標(biāo)圖的信息量更大，并從數(shù)據(jù)分析的角度為其帶來(lái)更多價(jià)值。

因此，我包含了2019 年的數(shù)據(jù)，并為每年的數(shù)據(jù)提供了data1 （2020 年）和data2 （2019 年）的變量名稱。同樣，我將兩個(gè)數(shù)據(jù)集連接到兩個(gè)系列，并為每個(gè)系列命名。看看它是如何完成的：

// 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 系列更寬一些，以便在視覺上更容易區(qū)分它們：

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

D. 改變顏色

現(xiàn)在，我想為每個(gè)系列設(shè)置不同的顏色，我選擇三種主要 DVS 顏色中的兩種：綠松石 (#2db1a4) 和梅花 (#9f5f9c)。稍后將使用第三種顏色。

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

AnyChart JavaScript 圖表庫(kù)提供了多個(gè)預(yù)先構(gòu)建的主題。為了使用 DVS 顏色使極坐標(biāo)圖看起來(lái)更加生動(dòng)，我設(shè)置了一個(gè)深色主題，即 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. 增強(qiáng)標(biāo)簽、工具提示和標(biāo)題

這是我使用 DVS 標(biāo)志的第三種顏色芥末色的地方。我通過(guò)為每個(gè)設(shè)置此顏色并更改字體大小參數(shù)以提高易讀性來(lái)修改極坐標(biāo)圖標(biāo)簽：

// configure the chart labels
var labels = chart.xAxis().labels();
labels.fontSize(14)
  .fontColor('#dcb22a');

接下來(lái)，我修改工具提示以反映每個(gè)系列的顏色以及標(biāo)簽，使其看起來(lái)更吸引人：

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

最后，我修改極坐標(biāo)圖標(biāo)題以包含年份并自定義其字體大小和顏色以增強(qiáng)外觀：

// 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相關(guān)資源，請(qǐng)點(diǎn)擊此處進(jìn)行查看~ 想要購(gòu)買AnyChart正版授權(quán)的朋友可以。