跨平台图表控件AnyChart快速入门教程（一）：快速开始-控件新闻-慧都网

跨平台图表控件AnyChart快速入门教程（一）：快速开始

翻译|使用教程|编辑：吴园园|2019-10-12 13:16:17.480|阅读 218 次

概述：本系列教程将为您介绍如何快速掌握AnyChart，本篇教程将为您带来如何在一分钟内获得第一个Web html5就绪图表。

相关链接：

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

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

点击下载AnyChart最新试用版

要开始使用AnyChart，请按照以下简单的步骤操作，您将在一分钟内获得第一个Web html5就绪图表。

如果要创建新的网页，请创建一个HTML文件并为其指定index.htm名称，或者在图表应位于的位置打开HTML文件。

引用网页顶部的JavaScript文件。
您可以使用如下所示的链接，也可以从下载anychart.min.js ，然后将其放入站点的任何文件夹中（在这种情况下，您必须使用自己的链接）。

<head>
<script src="//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图表，或在下面查看并启动它：

跨平台图表控件AnyChart快速入门教程（一）：快速开始

完整的源代码

在此之下，您可以看到完整的网页代码外观。

<!doctype html><head>
    <script src="//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正版授权的朋友可以。

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

图片2.jpg