AnyChart 数据可视化框架
AnyChart 是一个灵活的 JavaScript(HTML5、SVG、VML)图表框架,适合任何需要数据可视化的解决方案。
目录
下载并安装
有几种方法可以下载/安装 AnyChart。
直接下载
所有二进制文件都位于 dist 文件夹中。
CDN (中文版)
如果您不想自己下载和托管 AnyChart,您可以从 AnyChart CDN(内容交付网络)中包含它:https://www.anychart.com/download/cdn
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
</head>
包管理器
您可以使用 npm、bower 或 yarn 安装 AnyChart:
npm install anychart
bower install anychart
yarn add anychart
开始
开始使用 AnyChart 的最快方法是将框架包含到网页中并编写一些代码。请看下面的这个简单的 HTML 代码段:
<!doctype html>
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js" type="text/javascript"></script>
<script>
anychart.onDocumentReady(function() {
// create a pie chart
var chart = anychart.pie([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
chart.title("Top 5 pancake fillings");
// set the container where chart will be drawn
chart.container("container");
// draw the chart on the page
chart.draw();
});
</script>
</body>
</html>
分步快速入门指南
插件
AnyChart 为不同类型的技术提供了各种各样的插件,其中包括:
将 AnyChart 与 TypeScript 结合使用
你可以在你的 TypeScript 项目中使用 AnyChart - 我们有我们的库的定义文件,你可以在分发文件夹中找到。 请查看 webpack 和 typescript 集成示例以获取更多详细信息。
将 AnyChart 与 ECMAScript 6 结合使用
您可以通过两种方式在 ECMAScript 6 项目中使用 AnyChart:
普通 ECMAScript 6
要在页面上添加 AnyChart,请使用 section with attribute。<script>
type="module"
<script type="module">
import '_localpath_to_anychart/anychart-bundle.min.js'
// regular AnyChart code here
</script>
有关更多详细信息,请查看 AnyChart ES6 示例。
捆绑工具和模块加载器
您可以将 AnyChart 与任何捆绑工具或模块加载器一起使用,例如 WebPack、Browserify、Require.js 等。 有关更多详细信息,请查看 AnyChart Webpack 示例。
技术集成
AnyChart 可以在任何平台和任何数据库上运行。创建这些示例是为了演示 AnyChart 如何轻松集成到您的环境中。 所有示例均在 Apache 2.0 许可证下分发,并且可以根据您的应用程序进行自定义。如果您对此处未列出的特定集成感兴趣,请联系我们。
贡献指南
要为 AnyChart 项目做出贡献,请:
- Fork AnyChart 存储库。
- 从分支创建分支。
develop
- 进行您想要贡献的任何更改。
- 针对分支创建拉取请求。
develop
GitHub 文档:分叉仓库。
GitHub 文档:使用拉取请求进行协作。
请注意:
- AnyChart 对第三方开发者编写的代码不承担任何责任,直到 pull request 被接受。
- 在接受 pull request 后,pull request 的作者将代码的所有权限签名给 AnyChart。
构建和调试
依赖
AnyChart 使用多个第三方库和工具来处理 JavaScript 和 CSS。
- GraphicsJS - 高性能 SVG/VML 绘图库。
- Google Closure Library - 强大的低级 JavaScript 库。
- Google Closure Compiler - 将 JavaScript 代码编译为更好的 JavaScript。
- lesscpy - Python LESS 编译器。用于编译和缩小 AnyChart UI css。
构建选项
build.py
python 脚本用于 AnyChart 项目。您需要安装 python 才能使用它。
要查看构建脚本的所有可用选项,请使用 或 command:-h
--help
./build.py -h
.
要查看命令选项,请使用:
./build.py <command_name> -h
要安装所有依赖项,请使用以下命令:deps
./build.py deps
.
运行此命令后,您可以使用以下命令编译项目:compile
./build.py compile
这将编译 anychart-bundle 的生产版本和所有模块,并将它们放入文件夹中。您可以在我们的 Modules 文章中阅读有关模块的更多信息。out
要创建用于调试目的的开发版本,请使用 或 option:-d
--develop
./build.py compile -d
该选项会生成属性重命名报告、变量重命名报告和源映射位置映射文件:-df
./build.py compile -df
源映射将缩小的代码映射到源代码。阅读更多关于在 Chrome 中使用源映射或在 Firefox 中使用源映射的信息。
模块系统
AnyChart 从 v8.0.0 开始就被结构化为模块,所以你可以只使用你需要的。请查看我们的文章 模块 以开始使用模块。
包目录
├── css
│ ├── anychart.less
│ ...
├── dist
│ ├── json-schema.json
│ ├── xml-schema.xsd
│ ...
├── src
│ ├── charts
│ ├── core
│ ├── modules
│ ├── themes
│ ...
│ README.md
│ LICENSE
│ ...
CSS 服务
该文件夹包含编译为一个 .css 文件的 .less CSS 文件。css
来源
该文件夹包含根据项目结构组织的 AnyChart 源代码文件。例如:src
charts
子文件夹包含图表类core
子文件夹包含核心类modules
子文件夹包含模块themes
包含主题
距离
该文件夹包含二进制文件和 JSON/XML 架构。dist
接触
- 网站:www.anychart.com
- 电子邮件: contact@anychart.com
- 推特:anychart
- 脸书:AnyCharts
- LinkedIn:anychart
链接
- AnyChart 网站
- 下载 AnyChart
- AnyChart 许可
- AnyChart 支持
- 报告问题
- AnyChart 游乐场
- AnyChart 文档
- AnyChart API 参考
- AnyChart 示例解决方案
- AnyChart 集成