跨平台图表控件Anychart教程：如何使用JavaScript创建饼图-控件新闻-慧都网

跨平台图表控件Anychart教程：如何使用JavaScript创建饼图

翻译|使用教程|编辑：吴园园|2019-12-06 10:31:57.510|阅读 495 次

概述：本文介绍了如何创建，更改饼图并将其集成到您的网页中。

相关链接：

跨平台图表控件Anychart教程：如何使用JavaScript创建饼图

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

AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）

点击下载Anychart 8.7.0最新版

您是否曾经想过，Web开发人员如何创建交互式JavaScript饼图并将其集成到HTML5应用程序和网页中？如果答案是肯定的，请继续阅读！本文介绍了如何创建，更改饼图并将其集成到您的网页中。注意！本文提出了一个紧迫的政治问题。但是我们不会冒犯任何人！

饼图是最流行的图表类型之一。从数学上讲，它看起来像一个划分为多个扇区的圆圈，这些圆圈代表整体的一部分。对于我们大多数人而言，饼图看起来像切成几片的真实馅饼或比萨饼。在本文中，您将找到有关如何使用JS图表代码示例进行构建的详细教程。

创建一个JavaScript饼图

要使用JavaScript图表库制作任何类型的图表，您需要执行四个基本步骤。花费5分钟，您将学到向网页添加一个交互式JS（HTML5）饼形图，如下所示：

随本JS图表教程一起创建的JavaScript饼图

步骤1.创建一个HTML页面

您需要做的第一件事是创建一个文件，稍后您将在其中放置图表。创建一个简单的HTML页面，设置其标题并为将来的图表创建一个容器：

<!DOCTYPE html><html>
  <head>
    <title>JavaScript Pie Chart</title>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
  </body></html>

容器的width和height参数可以百分比或像素设置。他们负责图表的宽度和高度。将它们设置为“ 100％”将使图表占据整个页面。

步骤2.引用所有必需的文件

第二步是将链接添加到该<head>;部分。有必要加载JavaScript图表库并创建一个标签，将未来的饼图示例的整个代码放入其中：

<!DOCTYPE html><html>
  <head>
      <title>JavaScript Pie Chart</title>
      <script src="//cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
      <script src="//cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
        <!-- chart code will be here -->
    </script>
  </body></html>

步骤3.将数据放在一起

创建图表的主要目的是可视化数据。因此，很明显，您的数据是图表中最重要的部分，而制图仅仅是以图形，可视方式显示数据的一种方式。

如果选择错误的图表类型以可视化数据，则可能会误导自己或图表查看器。因此，明智地选择图表类型！如果您不知道图表类型之间有什么区别，请查看我们推出的的“ 选择图表类型”系列文章。也欢迎您使用这个漂亮的工具 Chartopedia；您将在其中找到饼图，并看到此图表类型非常适合显示“整体的一部分”。

显示一些整体组成正是我们现在要做的。我们将在种族方面看到整个美国民族的组成。要找出答案，让我们查看一下2010年美国商务部经济与统计局种族和西班牙裔起源概览，并从中获取一些数据：

美国各种族人口：2010年人口普查
种族	数
白色	223,553,265
黑人或非裔美国人	38,929,319
美洲印第安人和阿拉斯加原住民	2,932,248
亚洲人	14,674,252
夏威夷原住民和其他太平洋岛民	540,013
其他种族	19,107,368
两个或更多种族	9,009,073

如果查看人口普查摘要中的原始数据表，您可能已经注意到有一个单独的带有百分比的列。JavaScript图表的优点在于您不需要它，可以放入数据，并且图表可以计算所有内容：

// set the datavar data = [
    {x: "White", value: 223553265},
    {x: "Black or African American", value: 38929319},
    {x: "American Indian and Alaska Native", value: 2932248},
    {x: "Asian", value: 14674252},
    {x: "Native Hawaiian and Other Pacific Islander", value: 540013},
    {x: "Some Other Race", value: 19107368},
    {x: "Two or More Races", value: 9009073}];

步骤4.编写图表代码

这是创建交互式JavaScript饼图的最后一步。添加anychart.onDocumentReady功能。页面准备好后，将执行此功能。创建图表实体，将其放入容器中，然后将数据与图表连接。

anychart.onDocumentReady(function() {
  // set the data
  var data = [
      {x: "White", value: 223553265},
      {x: "Black or African American", value: 38929319},
      {x: "American Indian and Alaska Native", value: 2932248},
      {x: "Asian", value: 14674252},
      {x: "Native Hawaiian and Other Pacific Islander", value: 540013},
      {x: "Some Other Race", value: 19107368},
      {x: "Two or More Races", value: 9009073}
  ];
  // create the chart
  var chart = anychart.pie();
  // set the chart title
  chart.title("Population by Race for the United States: 2010 Census");
  // add the data
  chart.data(data);
  // display the chart in the container
  chart.container('container');
  chart.draw();});

外观如下：

现在可以使用JavaScript图表库创建一个简单的饼图！

更改图表外观

本部分是可选的。如果您对图表外观不满意，并希望它变得更加出色和吸引人，则可以进行必要的更改。

JS饼图有很多设置。

让我们开始修改吧！

图例

饼图具有特殊的控制元素：图例。图例也称为图表的键，它链接到图表上显示的数据。

默认情况下，图例位于图表的底部，在这种情况下看起来不佳。

要将图例移至右侧并使其元素垂直堆叠，请在代码中添加以下设置：

// set legend position
chart.legend().position("right");
// set items layout
chart.legend().itemsLayout("vertical");

分类

我们可以更改的另一件事是饼中切片的顺序，以方便进行可视数据分析。让我们整理一下：

// sort elements
chart.sort("desc");

并且图片变得更清晰：

热键

我们还有最后一件事可以做，以突出我们在开头提到的热键问题。让我们在视觉上脱颖而出。为此，我们通过特殊设置更改数据：

{x: "White", value: 223553265, exploded: true},

最终的JavaScript饼形图如下所示：

结论

这个小型教程介绍了如何使用AnyChart JavaScript图表库构建饼图。请访问官方的AnyChart JS Charts网站以获取更多信息，尤其是，请访问JavaScript Chart Gallery以获取更多图表类型的说明。该AnyChart的图表文档和AnyChart的的JavaScript API将帮助您构建和轻松调整HTML5图表。

=====================================================

想要购买Anychart正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼

图片2.jpg