创建一个JavaScript饼图
要使用JavaScript图表库制作任何类型的图表，您需要执行四个基本步骤。花费5分钟，您将学到向 页添加一个交互式JS（HTML5）饼形图，如下所示：
步骤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="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script> <script src="https://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 positionchart.legend().position("right");// set items layoutchart.legend().itemsLayout("vertical");
分类
我们可以更改的另一件事是饼中切片的顺序，以方便进行可视数据分析。让我们整理一下：
// sort elementschart.sort("desc");
并且图片变得更清晰：
热键
我们还有最后一件事可以做，以突出我们在开头提到的热键问题。让我们在视觉上脱颖而出。为此，我们通过特殊设置更改数据：
{x: "White", value: 223553265, exploded: true},
最终的JavaScript饼形图如下所示：
结论
这个小型教程介绍了如何使用AnyChart JavaScript图表库构建饼图。请访问官方的AnyChart JS Charts 站以获取更多信息，尤其是，请访问JavaScript Chart Gallery以获取更多图表类型的说明。该AnyChart的图表文档和AnyChart的的JavaScript API将帮助您构建和轻松调整HTML5图表。
=====================================================
想要购买Anychart正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！