国产小嫩货视频在线观看,欧美视频一区二区三区,欧美精品小视频

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

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

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

相關(guān)鏈接：

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

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

點(diǎn)擊下載AnyChart最新試用版

要開始使用AnyChart，請(qǐng)按照以下簡(jiǎn)單的步驟操作，您將在一分鐘內(nèi)獲得第一個(gè)Web html5就緒圖表。

如果要?jiǎng)?chuàng)建新的網(wǎng)頁(yè)，請(qǐng)創(chuàng)建一個(gè)HTML文件并為其指定index.htm名稱，或者在圖表應(yīng)位于的位置打開HTML文件。

引用網(wǎng)頁(yè)頂部的JavaScript文件。
您可以使用如下所示的鏈接，也可以從下載anychart.min.js ，然后將其放入站點(diǎn)的任何文件夾中（在這種情況下，您必須使用自己的鏈接）。

<head>
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js" type="text/javascript"></script>
</head>

創(chuàng)建一個(gè)容器

在頁(yè)面中添加一個(gè)塊級(jí)HTML元素，設(shè)置元素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>

見圖表

完成所有這些步驟后，您應(yīng)該得到以下結(jié)果。啟動(dòng)并瀏覽基本的AnyChart圖表，或在下面查看并啟動(dòng)它：

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

完整的源代碼

在此之下，您可以看到完整的網(wǎng)頁(yè)代碼外觀。

<!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>

另外，您可以將此代碼復(fù)制并粘貼到計(jì)算機(jī)上的文件中，然后在瀏覽器中運(yùn)行以查看其工作方式。

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

想要購(gòu)買Anychart正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼

圖片2.jpg