翻譯|使用教程|編輯:吳園園|2019-10-12 13:16:17.480|閱讀 264 次
概述:本系列教程將為您介紹如何快速掌握AnyChart,本篇教程將為您帶來如何在一分鐘內獲得第一個Web html5就緒圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數據分析、統計學、金融等領域。重要推薦:
AnyChart現已更新至最新版本8.7.0,九大數據可視化新功能上線,改進了功能并修復了一些bug。新版本,新功能,趕快下載體驗吧~(點擊查看更新詳情)
要開始使用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圖表,或在下面查看并啟動它:
完整的源代碼
在此之下,您可以看到完整的網頁代碼外觀。
<!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正版授權的朋友可以。
更多精彩內容,歡迎關注下方的微信公眾號,及時獲取產品最新資訊▼▼▼
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: