图表控件AnyChart如何构建 JavaScript 圆环图？-控件新闻-慧都网

图表控件AnyChart如何构建 JavaScript 圆环图？

翻译|使用教程|编辑：杨鹏连|2021-07-08 13:53:35.640|阅读 238 次

概述：在本教程中，我们将可视化有关顶级在线音乐流媒体平台的全球市场份额的数据。这是一个很好的信息示例，可以在圆环图中很好地表示

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

AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。

点击下载AnyChart最新版

想知道数据设计人员和开发人员如何使用 JavaScript 创建引人注目的圆环图吗？那么你就在正确的时间来到了正确的地方。跟着，即使您是初学者，您也将学习如何轻松构建交互式 JS 圆环图！

在本教程中，我们将可视化有关顶级在线音乐流媒体平台的全球市场份额的数据。这是一个很好的信息示例，可以在圆环图中很好地表示。

为了确保我们在同一页面上，让我们先看看什么是圆环图，然后立即开始绘制图表！

什么是圆环图？

基本上，圆环图（或圆环图）是具有中心切出区域的饼图，可以填充附加信息。它们经常被用作可视化分类数据比例的一种方式。

在圆环图中，每个切片（或一块）的大小描述了每个类别代表的总数。因此，这种类型的数据可视化可以帮助您快速了解变量的比例组成。

根据经验，圆环图图形中可视化的类别数量应限制在少数，以保持表示形式整洁并避免易读性问题。

JS 圆环图预览

看看在本教程结束时 JS 甜甜圈图会怎样。它将是互动的！

构建一个基本的 JavaScript 圆环图

只需四个简单的步骤即可构建漂亮的 JS 圆环图。那不是我们耳边的音乐吗？

创建一个 HTML 页面。
包括 JavaScript 文件。
添加数据。
编写一些JS图表代码。

1. 创建一个 HTML 页面

我们要做的第一件事是创建一个基本的 HTML 页面，其中包含一个用于保存圆环图的块元素。
为了<div>稍后在代码中识别这一点，我们给它一个 id 属性。这次让它只是“容器”。
我们还将块内的width和height参数指定<style>为“100%”，以便圆环图填满整个页面。

<html>
  <head>
    <title>JavaScript Donut 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>

2. 包含 JavaScript 文件

有许多 JavaScript 图表库提供了现成的功能，即使没有很多技术技能和经验，这些功能也非常有助于快速可视化图表中的数据。其中一些支持开箱即用的圆环图。
在本教程中，我们使用AnyChart JS 库。它是用于交互式数据可视化的轻量级、强大且灵活的解决方案。AnyChart 也非常适合初学者，因为它提供了广泛而详细的文档和大量带有源代码的图表示例，可以在专用操场上玩。
因此，作为第二步，让我们从库的CDN 中包含必要的 JavaScript 文件（或者您可以根据需要下载它们）。
AnyChart 的 JavaScript 图表库采用模块化系统以确保最佳性能。要使用它创建交互式 HTML5 甜甜圈图，我们需要向HTML 页面的部分添加两个脚本——核心模块和饼图和甜甜圈模块<head>。

<html>
  <head>
    <title>JavaScript Donut Chart</title>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-pie.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 code for the JS donut chart will come here
    </script>
  </body>
</html>

3. 添加数据

圆环图是一种简单的图表类型，需要一个简单而有限的数据集。所以，虽然 AnyChart 支持多种加载数据的方式，但我们只会以一种轻松的方式直接传递数据。

在本教程中，我决定获取有关领先音乐流媒体应用市场份额的数据，这些数据是我从应用业务网站收集的。所以，我只是添加它，如下所示：

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

现在我们已经准备好了一切，让我们准备好通过添加一些 JavaScript 代码来查看圆环图的形状！基本上，这是非常直观的。

4. 为我们的圆环图编写 JS 图表代码

我们要做的第一件事是添加一个包含所有代码的函数，以确保其中的代码仅在页面准备就绪后才会执行。

使用适当的 JS 库创建甜甜圈图非常简单，在这种情况下，它实际上只是几行代码！

正如我们在上面了解到的，甜甜圈图基本上是一个带孔的饼图，就像一个环。因此，我们只需创建一个饼图实例并为其指定一个内半径值即可使其成为圆环图。

// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');

然后我们给我们的圆环图一个标题并在最终绘制结果可视化之前设置容器 id。

chart.title('Music Streaming Apps Global Market Share')
chart.container('container');
chart.draw();

就是这样 - 一个功能齐全的基于 JavaScript 的交互式圆环图准备好了！这不是绝对容易吗？

请注意，图例是自动创建的。此外，继续并单击其项目或任何部分以查看很酷的交互式甜甜圈切片行为。

圆环图清楚地表明 Spotify 是全球领导者，Spotify 和 Apple Music 共同占据了音乐流媒体应用程序市场的一半以上。

现在，让我们自定义我们的甜甜圈图，使其看起来更酷，并以更清晰的方式传达见解。

自定义 JS 圆环图

AnyChart 的 JavaScript 库的一个很棒的特性是，最初的圆环图构建得非常快，然后有大量的选项可以按照我们想要的方式微调图表。
让我们看看一些有趣的方法，使我们的交互式圆环图更具美感和信息量：

更改调色板。
添加标签。
改进工具提示。
在甜甜圈的中心添加细节。

1.更改调色板

颜色是使图表看起来更加个性化的最简单但最有效的方法。由于我们在这里代表品牌，我们可以将它们的颜色应用于相应数据点的可视化。

这很简单，我们只需定义要使用的调色板，并在创建圆环图时将其作为参数传递。

// create a color palette
var palette = anychart.palettes.distinctColors();
  
// set the colors according to the brands
palette.items([
  { color: '#1dd05d' },
  { color: '#000000' },
  { color: '#00a3da' },
  { color: '#156ef2' },
  { color: '#f60000' },
  { color: '#96a6a6' }
]);

// apply the donut chart color palette
chart.palette(palette);

看看我们的甜甜圈图在品牌颜色下的样子！

此圆环图版本可通过AnyChart Playground和CodePen上的代码获得。

2. 添加标签

由于我们的细分数量较少，而且每个细分都足够大，因此我们可以在圆环图的每个切片内添加品牌名称和百分比数字。这将消除对图例的需要。
同样，这真的很简单，只需添加两行 JS 代码即可完成。

// set the position of labels
chart.labels().format('{%x} — {%y}%').fontSize(16);
  
// disable the legend
chart.legend(false);

3.改进提示

使工具提示清晰且具有附加值始终是一个好主意。在我们的甜甜圈图中，只有两个信息点：品牌名称和百分比份额。因此，我们可以拥有包含该信息的基本工具提示，而不会出现任何混乱。

chart.tooltip().format('Market share: {%PercentValue}%');

4.在甜甜圈的中心添加细节

数据可视化的一个重要方面在于空间利用。由于圆环图中间有一个空白，我们可以用它来显示标题和其他一些信息。
让我们定义一个独立元素并将其放置在中心。除了标题之外，我们还添加了一个副标题来代表我们的观察：

// create a standalone label
var label = anychart.standalones.label();

// configure the label settings
label
  .useHtml(true)
  .text(
    '<span style = "color: #313136; font-size:20px;">Global Market Share of <br/> Music Streaming Apps</span>' +
    '<br/><br/></br><span style="color:#444857; font-size: 14px;"><i>Spotify and Apple Music have more <br/>than 50% of the total market share</i></span>'
  )
  .position('center')
  .anchor('center')
  .hAlign('center')
  .vAlign('middle');

// set the label as the center content
chart.center().content(label);

结果如下！

它就是这样——一个用 JavaScript 构建的酷炫时髦的甜甜圈图！
您可以在下方或AnyChart Playground或CodePen上找到此圆环图的最终代码。

<html>
  <head>
    <title>JavaScript Donut Chart</title>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.10.0/js/anychart-pie.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 () {
  
  // add data
  var data = anychart.data.set([
    ['Spotify', 34],
    ['Apple Music', 21],
    ['Amazon Music', 15],
    ['Tencent apps', 11],
    ['YouTube Music', 6],
    ['Others', 13]
  ]);
  
  // create a pie chart with the data
  var chart = anychart.pie(data);
  
  // set the chart radius making a donut chart
  chart.innerRadius('55%')

  // create a color palette
  var palette = anychart.palettes.distinctColors();
 
  // set the colors according to the brands
  palette.items([
    { color: '#1dd05d' },
    { color: '#000000' },
    { color: '#00a3da' },
    { color: '#156ef2' },
    { color: '#f60000' },
    { color: '#96a6a6' }
  ]);

  // apply the donut chart color palette
  chart.palette(palette);
  
  // set the position of labels
  chart.labels().format('{%x} — {%y}%').fontSize(16);
  
  // disable the legend
  chart.legend(false);
  
  // format the donut chart tooltip
  chart.tooltip().format('Market share: {%PercentValue}%');

  // create a standalone label
  var label = anychart.standalones.label();

  // configure the label settings
  label
    .useHtml(true)
    .text(
      '<span style = "color: #313136; font-size:20px;">Global Market Share of <br/> Music Streaming Apps</span>' +
      '<br/><br/></br><span style="color:#444857; font-size: 14px;"><i>Spotify and Apple Music have more <br/>than 50% of the total market share</i></span>'
    )
    .position('center')
    .anchor('center')
    .hAlign('center')
    .vAlign('middle');
  
  // set the label as the center content
  chart.center().content(label);
  
  // set container id for the chart
  chart.container('container');
  
  // initiate chart drawing
  chart.draw();

});

    </script>
  </body>
</html>

结论

在本教程中，我们看到了创建和自定义交互式 JS 圆环图是多么快速和容易。它是最容易构建的图表之一，因此当人们开始学习网络数据可视化时，它是一个很好的选择。
如果您想进一步改进我们刚刚制作的圆环图或根据您自己的需要创建一个完全不同的圆环图，请查看圆环图文档，不要错过圆环图示例以获取灵感。也欢迎您查看 AnyChart JavaScript 数据可视化库中支持的其他图表类型。
如果您对构建或使用圆环图或任何与数据可视化相关的问题有任何疑问，请告诉我，我会尽力回复并提供帮助。