翻譯|使用教程|編輯:吳園園|2019-10-30 14:39:55.930|閱讀 325 次
概述:本系列教程將為您介紹如何快速掌握AnyChart,本篇教程將為您帶來AnyChart中的模塊化系統功能。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數據分析、統計學、金融等領域。重要推薦:
AnyChart現已更新至最新版本8.7.0,九大數據可視化新功能上線,改進了功能并修復了一些bug。新版本,新功能,趕快下載體驗吧~(點擊查看更新詳情)
總覽
模塊化系統是AnyChart 8的核心。通過僅連接那些實際使用的圖表類型和功能,它可以使您顯著減少網頁上運行的JavaScript代碼的大小。基于模塊化的AnyChart與流行的捆綁工具(如Webpack,Browserify等)完全兼容。
基本
第一步
您應該始終添加以下模塊之一:
Core
Base
在引用其他模塊之前
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-core.min.js"></script> <script src="//cdn.anychart.com/releases/8.7.0/js/anychart-bundle.min.js"></script> <script src="//cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js"></script>
所有圖表類型所需的主要模塊是Core,即引擎的核心。除其他事項外,它還包括在“ Base”和“ Bundle”模塊中,因此您也可以改用它們。
注意:所有帶有模塊的JS文件都存儲在AnyChart CDN服務器上,但是您可以下載任何文件并將其放置在其他位置。
組合模塊
該核心模塊應由圖表類型和您要添加的功能所需的模塊組合。
例如,要創建可導出的餅圖,請將Core與Pie和Donut和Exports模塊組合:
<head> <script src="//cdn.anychart.com/releases/8.7.0/js/anychart-core.min.js"></script> <script src="//cdn.anychart.com/releases/8.7.0/js/anychart-pie.min.js"></script> <script src="//cdn.anychart.com/releases/8.7.0/js/anychart-exports.min.js"></script> </head>
相同的邏輯適用于基本模塊。但是,請注意,它已經包含了某些圖表類型,因此僅當您需要添加不包含的圖表類型或功能時,才必須引用其他模塊。
至于Bundle,它包括擴展以外的所有其他模塊。
BUILDER
Custom JavaScript Builder設計用于組裝一個JavaScript文件,該文件僅包含您真正要使用的功能和圖表類型。
要構建自定義JavaScript二進制文件,請檢查要包含在構建中的模塊:指定要創建的圖表類型,并在需要時添加特征和主題。然后按下底部的綠色“構建”按鈕。
您還可以構建一個包含許可證密鑰的文件。請參閱學分文章以了解更多信息。
BUNDLE
AnyChart Bundle版本包含所有圖表模塊和功能。它是最大的文件,請謹慎使用。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-bundle.min.js"></script>
圖表模塊
提供以下模塊:
基礎
AnyChart Base是一個方便的模塊,其中包含:
核心
餡餅和甜甜圈
基本笛卡爾
分散
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js"></script>
核心
AnyChart Core是引擎的核心。每當您使用任何模塊(Bundle和Base除外)時都需要它。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-core.min.js"></script>
子彈
用于創建項目符號圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-bullet.min.js"></script>
基本笛卡爾
用于創建基本笛卡爾圖表的模塊:Area,Bar,Box,Bubble,Column,Area,HiLo,Candlestick,Jump Line,Line,Marker,OHLC,Range Area,Range Bar,Range Column,Range Spline Area,Range Step Area,樣條區域,樣條曲線,階梯區域,階梯線,桿。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-cartesian.min.js"></script>
基本3D
用于創建笛卡爾3D圖表的模塊(Pie和Doughnut除外):
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-cartesian-3d.min.js"></script>
圓規
創建圓規的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-circular-gauge.min.js"></script>
甘特
用于創建項目和資源甘特圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-gantt.min.js"></script>
地理地圖
用于創建地理地圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-map.min.js"></script>
圖表圖
用于創建Graph圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-graph.min.js"></script>
熱圖
用于創建熱圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-heatmap.min.js"></script>
線規
用于創建線性量規的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-linear-gauge.min.js"></script>
Mekko圖
創建Mekko圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-mekko.min.js"></script>
網絡圖
用于創建網絡圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-graph.min.js"></script>
帕累托
用于創建帕累托圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-pareto.min.js"></script>
PERT
用于創建PERT圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-pert.min.js"></script>
餡餅和甜甜圈
用于創建餅圖和甜甜圈圖(包括3D版本)的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-pie.min.js"></script>
極坐標圖
用于創建極坐標圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-polar.min.js"></script>
金字塔和漏斗
用于創建金字塔和漏斗圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-pyramid-funnel.min.js"></script>
雷達
用于創建雷達圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-radar.min.js"></script>
資源
一個用于創建資源圖表的beta模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-resource.min.js"></script>
Sankey圖
用于創建Sankey圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-sankey.min.js"></script>
散點圖
用于創建散點圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-scatter.min.js"></script>
迷你圖
用于創建迷你圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-sparkline.min.js"></script>
股票
用于創建股票圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-stock.min.js"></script>
森伯斯特圖表
用于創建森伯斯特圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-sunburst.min.js"></script>
表面
用于創建表面圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-surface.min.js"></script>
標簽云
創建標簽云的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-tag-cloud.min.js"></script>
時間線
用于創建時間線圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-timeline.min.js"></script>
樹狀圖
用于創建樹形圖圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-treemap.min.js"></script>
維恩圖
用于創建維恩圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-venn.min.js"></script>
瀑布
用于創建瀑布圖的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-waterfall.min.js"></script>
詞樹
用于創建詞樹圖表的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-bundle.min.js"></script>
特征
負責庫的各種功能的其他模塊。
注解
使用注釋的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-annotations.min.js"></script>
數據適配器
使用數據適配器的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-data-adapter.min.js"></script>
出口產品
啟用導出和共享的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-exports.min.js"></script>
表格布局
啟用表格布局的模塊:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-table.min.js"></script>
通用UI
啟用UI功能的模塊,例如上下文菜單,預加載器,縮放控件,范圍選擇器和范圍選擇器:
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-ui.min.js"></script>
UI綁定
UI綁定模塊是用于將HTML5 UI元素綁定到圖表設置的一組實用程序。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-ui-binding.min.js"></script>
VML渲染器
為舊瀏覽器啟用VML支持的模塊。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-vml.min.js"></script>
擴展名
擴展模塊提供附加功能。擴展不能成為Bundle的一部分,也不能使用Builder進行編譯。
圖表編輯器
圖表編輯器是一個擴展,提供用于配置圖表和圖表數據的UI。在AnyChart圖表編輯器部分中了解更多信息。
<script src="//cdn.anychart.com/releases/8.7.0/js/anychart-editor.min.js"></script>
=====================================================
想要購買Anychart正版授權的朋友可以。
更多精彩內容,歡迎關注下方的微信公眾號,及時獲取產品最新資訊▼▼▼
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: