本系列教程将为您介绍如何快速掌握AnyChart，本篇教程将为您带来如何在一分钟内获得第一个Web html5就绪图表。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、 表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>
AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）
AnyChart最新试用版
要开始使用AnyChart，请按照以下简单的步骤操作，您将在一分钟内获得第一个Web html5就绪图表。
如果要创建新的 页，请创建一个HTML文件并为其指定index.htm名称，或者在图表应位于的位置打开HTML文件。
引用 页顶部的JavaScript文件。
您可以使用如下所示的链接，也可以从下载anychart.min.js ，然后将其放入站点的任何文件夹中（在这种情况下，您必须使用自己的链接）。
<head><script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js" type="text/javascript"></script></head>
创建一个容器
在页面中添加一个块级HTML元素，设置元素id以及其width和height。
<body><div id="container" style="width: 500px; height: 400px;"></div></body>
创建图表
将JavaScript代码的脚本用下面的代码的任何地方在头部或身体部分。此代码示例使用JavaScript API创
<script> anychart.onDocumentLoad(function () { // create an instance of a pie chart var chart = anychart.pie(); // set the data chart.data([ ["Chocolate", 5], ["Rhubarb compote", 2], ["Crêpe Suzette", 2], ["American blueberry", 2], ["Buttermilk", 1] ]); // set chart title chart.title("Top 5 pancake fillings"); // set the container element chart.container("container"); // initiate chart display chart.draw(); });</script>
见图表
完成所有这些步骤后，您应该得到以下结果。启动并浏览基本的AnyChart图表，或在下面查看并启动它：
完整的源代码
在此之下，您可以看到完整的 页代码外观。
<!doctype html><head> <script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js" type="text/javascript"></script> <script> anychart.onDocumentLoad(function () { // create an instance of a pie chart var chart = anychart.pie(); // set the data chart.data([ ["Chocolate", 5], ["Rhubarb compote", 2], ["Crêpe Suzette", 2], ["American blueberry", 2], ["Buttermilk", 1] ]); // set chart title chart.title("Top 5 pancake fillings"); // set the container element chart.container("container"); // initiate chart display chart.draw(); }); </script></head><body> <div id="container" style="width: 500px; height: 400px;"></div></body></html>
另外，您可以将此代码复制并粘贴到计算机上的文件中，然后在浏览器中运行以查看其工作方式。
=====================================================
想要购买Anychart正版授权的朋友可以咨询官方客服。
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！