日韩国产精品中文,97视频专区,91视频伦理

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

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

翻譯|使用教程|編輯：張瑩心|2021-11-26 10:19:12.770|閱讀 267 次

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

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

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

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

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

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

從根本上說，極坐標(biāo)圖是用極坐標(biāo)繪制的圓形圖的變體。它也可以很好地將某些類別的數(shù)據(jù)可視化以進(jìn)行比較，這正是我現(xiàn)在想要演示的情況。在本教程中，我將構(gòu)建一個柱狀極坐標(biāo)圖，條形圖從圖表的中心開始生長，以用它們的長度來表示值。

數(shù)據(jù)可視化協(xié)會(DVS) 每年都會對數(shù)據(jù)可視化從業(yè)者進(jìn)行行業(yè)現(xiàn)狀調(diào)查，我認(rèn)為這可能是利用其最新數(shù)據(jù)的絕佳機(jī)會。特別是，我想根據(jù)響應(yīng)查看用于數(shù)據(jù)可視化的最流行技術(shù)。因此，在這里，我將制作一個 JS 極坐標(biāo)圖，繪制前 15 個極坐標(biāo)圖，構(gòu)成一個很酷的說明性真實(shí)世界示例。

JS 極坐標(biāo)圖預(yù)覽

偷看一下最終的 JavaScript 極坐標(biāo)圖會是什么樣子：

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

通過 4 個簡單步驟構(gòu)建 JavaScript 極坐標(biāo)圖

為了在此處創(chuàng)建極坐標(biāo)圖，我將使用 JavaScript 圖表庫。此類庫配備了用于基本功能的預(yù)先編寫的代碼，這使得創(chuàng)建數(shù)據(jù)可視化變得更加容易和快捷。

在本教程中，我選擇了AnyChart JavaScript 庫，因?yàn)樗子谑褂?、靈活且可免費(fèi)用于非商業(yè)用途。此外，它是一個很棒的庫，因?yàn)橛泻芏嗍纠土己?的文檔。

一般來說，可以將創(chuàng)建任何 JS 圖形（包括極坐標(biāo)圖）的整個過程分為四個基本步驟或階段。他們是：

用 HTML 創(chuàng)建一個基本的網(wǎng)頁。
引用所需的 JavaScript 文件。
添加數(shù)據(jù)。
編寫一些JS代碼來繪制圖表。

和我一起按照這些步驟制作一個很棒的基于 JavaScript 的交互式極坐標(biāo)圖可視化！

1.用HTML創(chuàng)建一個基本的網(wǎng)頁

首先，我創(chuàng)建了一個基本的 HTML 頁面和一個用于保存極坐標(biāo)圖的塊元素：

<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%，以使極坐標(biāo)圖在整個頁面上呈現(xiàn)。

2. 引用所需的 JavaScript 文件

接下來，在<head>頁面的部分中，我引用了正在使用的圖表庫的特定腳本。

在這里，我正在使用 AnyChart，因此我將從其CDN 中包含所需的文件。該庫是模塊化的，對于極坐標(biāo)圖，我只需要方便的核心和極坐標(biāo)模塊。

<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>
      // All the JS polar chart code will come here.
    </script>
  </body>
</html>

3. 添加數(shù)據(jù)

為了為我未來的極坐標(biāo)圖獲取數(shù)據(jù)集，我過濾了 DVS 的2020 年數(shù)據(jù)可視化人口普查調(diào)查數(shù)據(jù)，并確定了受訪者回答的 15 種最常用的技術(shù)。

現(xiàn)在，為了將此數(shù)據(jù)正確添加到圖表中，我創(chuàng)建了一個以類別名稱作為參數(shù)的數(shù)組x，因?yàn)槲覀冊?X 軸上繪圖，并將每個類別的度量作為value參數(shù)。

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

準(zhǔn)備工作已全部完成，現(xiàn)在是讓基于 JavaScript 的極坐標(biāo)圖顯示在畫布上的時候了！

4.編寫一些JS代碼來繪制極坐標(biāo)圖

我在這里做的第一件事是添加一個包含所有 JS 極坐標(biāo)圖代碼的函數(shù)。這確保其中的所有內(nèi)容僅在網(wǎng)頁準(zhǔn)備好后才會執(zhí)行。

在 JavaScript 中制作極坐標(biāo)圖非常簡單。我只寫一行代碼來創(chuàng)建它，然后添加上一步準(zhǔn)備好的數(shù)據(jù)數(shù)組，并將數(shù)據(jù)連接到圖表創(chuàng)建一個列系列。

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

});

數(shù)據(jù)是分類的，由離散值組成。所以我將 X-scale 指定為序數(shù)。我還將 Y 軸設(shè)置為“false”以避免顯示相應(yīng)的值。

// set the x-scale
chart.xScale('ordinal');
 
// disable the y-axis
chart.yAxis(false);

命名圖表總是很重要的，這樣查看者就可以毫無問題地快速理解所顯示的內(nèi)容。所以，我設(shè)置了極坐標(biāo)圖標(biāo)題：

// set the chart title
chart
  .title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');

最后，我參考之前添加的<div>容器和命令來顯示生成的極坐標(biāo)圖。

// set the chart container id
chart.container('container');
 
// initiate the chart display
chart.draw();

更多AnyChart相關(guān)資源，請點(diǎn)擊此處進(jìn)行查看~ 想要購買AnyChart正版授權(quán)的朋友可以。

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：?圖表控件AnyChart教程：如何制作 JavaScript 極坐標(biāo)圖（二）下一篇：New！DevExpress ASP.NET v21.2新版本系統(tǒng)環(huán)境配置要求

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：圖表

源碼：非開源

產(chǎn)品編號：11009

當(dāng)前版本：v8.11.0 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： Anychart

正式授權(quán)

">AnyChart

靈活的高度可定制的跨瀏覽器、跨平臺JavaScript (HTML5) 圖表控件。

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

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

2. 引用所需的 JavaScript 文件

3. 添加數(shù)據(jù)

4.編寫一些JS代碼來繪制極坐標(biāo)圖

用科技創(chuàng)就卓越

Create excellence with technology

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

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

2. 引用所需的 JavaScript 文件

3. 添加數(shù)據(jù)

4.編寫一些JS代碼來繪制極坐標(biāo)圖

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology