AnyChart 数据可视化框架

风流野趣fly

于 2024-09-11 17:20:17 发布

阅读量421

点赞数 18

文章标签： ar 数据可视化信息可视化前端框架前端

本文链接：https://blog.csdn.net/wmuj_/article/details/142145488

版权

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 许可证下分发，并且可以根据您的应用程序进行自定义。如果您对此处未列出的特定集成感兴趣，请联系我们。

ASP.NET、C# 和 MySQL	ASP.NET、VB.NET 和 MySQL	ASP.NET、C#、SignalR 和 MySQL
Go、Revel 和 MySQL	Go 和 MySQL	Java Servlet、Maven、JDBC、JSP 和 MySQL
使用 socket.io 的 NodeJS 和 MongoDB	Java Spring、Maven、Hibernate 和 MySQL	Julia 和 MySQL
NodeJS Express、Jade 和 MongoDB	PHP、Symfony 和 MySQL	PHP、Laravel 和 MySQL
PHP、Slim 和 MySQL	Perl、Catalyst Web 框架和 MySQL	Python、Flask 和 MySQL
Python、Django 和 MySQL	R、Shiny 和 MySQL	Ruby、Sinatra 和 MySQL
Ruby on Rails 和 MySQL	Scala、Akka 和 MySQL	Scala、Play 和 MySQL

贡献指南

要为 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.pypython 脚本用于 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

关注

18
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
AnyChart 数据可视化框架

是为了演示 AnyChart 如何轻松集成到您的环境中。您可以将 AnyChart 与任何捆绑工具或模块加载器一起使用，例如 WebPack、Browserify、Require.js 等。AnyChart 是一个灵活的 JavaScript（HTML5、SVG、VML）图表框架，适合任何需要数据可视化的解决方案。你可以在你的 TypeScript 项目中使用 AnyChart - 我们有我们的库的定义文件，你可以在。AnyChart 从 v8.0.0 开始就被结构化为模块，所以你可以只使用你需要的。
复制链接

扫一扫