91刺激视频,亚洲成年人网,日韩色综合

跨平臺圖表控件AnyChart快速入門教程（一）：快速開始

翻譯|使用教程|編輯：吳園園|2019-10-12 13:16:17.480|閱讀 271 次

概述：本系列教程將為您介紹如何快速掌握AnyChart，本篇教程將為您帶來如何在一分鐘內獲得第一個Web html5就緒圖表。

相關鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學、金融等領域。重要推薦：

AnyChart現(xiàn)已更新至最新版本8.7.0，九大數(shù)據(jù)可視化新功能上線，改進了功能并修復了一些bug。新版本，新功能，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載AnyChart最新試用版

要開始使用AnyChart，請按照以下簡單的步驟操作，您將在一分鐘內獲得第一個Web html5就緒圖表。

如果要創(chuàng)建新的網頁，請創(chuàng)建一個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>

創(chuàng)建一個容器

在頁面中添加一個塊級HTML元素，設置元素id以及其width和height。

<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>

創(chuàng)建圖表

將JavaScript代碼的腳本用下面的代碼的任何地方在頭部或身體部分。此代碼示例使用JavaScript API創(chuàng)

<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