AnyChart 数据可视化框架

AnyChart 数据可视化框架

AnyChart 是一个灵活的 JavaScript(HTML5、SVG、VML)图表框架,适合任何需要数据可视化的解决方案。

目录

  • 下载并安装
  • 开始
  • 插件
  • 将 AnyChart 与 TypeScript 结合使用
  • 将 AnyChart 与 ECMAScript 6 结合使用
  • 技术集成
  • 贡献指南
  • 构建和调试
  • 模块系统
  • 包目录
  • 接触
  • 链接
  • 许可证

下载并安装

有几种方法可以下载/安装 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>
包管理器

您可以使用 npmbower 或 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 chartvar 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 drawnchart.container("container");// draw the chart on the pagechart.draw();});
</script>
</body>
</html>
分步快速入门指南
  • AnyChart 快速入门
  • AnyStock 快速入门
  • AnyMap 快速入门
  • AnyGantt 快速入门

插件

AnyChart 为不同类型的技术提供了各种各样的插件,其中包括:

  • AngularJS v1.x 版本
  • AngularJS v2.x 版本
  • 反应
  • 男人
  • 流星
  • NodeJS 的
  • Qlik
  • jQuery 查询

将 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# 和 MySQLASP.NET、VB.NET 和 MySQLASP.NET、C#、SignalR 和 MySQL
Go、Revel 和 MySQLGo 和 MySQLJava Servlet、Maven、JDBC、JSP 和 MySQL
使用 socket.io 的 NodeJS 和 MongoDBJava Spring、Maven、Hibernate 和 MySQLJulia 和 MySQL
NodeJS Express、Jade 和 MongoDBPHP、Symfony 和 MySQLPHP、Laravel 和 MySQL
PHP、Slim 和 MySQLPerl、Catalyst Web 框架和 MySQLPython、Flask 和 MySQL
Python、Django 和 MySQLR、Shiny 和 MySQLRuby、Sinatra 和 MySQL
Ruby on Rails 和 MySQLScala、Akka 和 MySQLScala、Play 和 MySQL

贡献指南

要为 AnyChart 项目做出贡献,请:

  • Fork AnyChart 存储库。
  • 从分支创建分支。develop
  • 进行您想要贡献的任何更改。
  • 针对分支创建拉取请求。develop

GitHub 文档:分叉仓库。
GitHub 文档:使用拉取请求进行协作。

请注意:

  1. AnyChart 对第三方开发者编写的代码不承担任何责任,直到 pull request 被接受。
  2. 在接受 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

接触

  • 网站:www.anychart.com
  • 电子邮件: contact@anychart.com
  • 推特:anychart
  • 脸书:AnyCharts
  • LinkedIn:anychart

链接

  • AnyChart 网站
  • 下载 AnyChart
  • AnyChart 许可
  • AnyChart 支持
  • 报告问题
  • AnyChart 游乐场
  • AnyChart 文档
  • AnyChart API 参考
  • AnyChart 示例解决方案
  • AnyChart 集成

​编辑

许可证

© AnyChart.com - JavaScript 图表。保留所有权利。​编辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/421854.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Anolis OS 7.9(龙蜥操作系统)上Oracle12C Release 2 (12.2)打补丁

本文的oracle使用的是单实例环境 一、打补丁前环境准备 1、确保make, ar, ld,和 nm四个可执行命令在$PATH中 export PATH$PATH:/bin2、查看已装的Oracle的OPatch版本 #切换到oracle用户 su - oracle#进入到数据库的安装目录下的opatch目录 cd /ora01/app/oracle/product/12…

JS_函数声明

JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别 函数说明 函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字函数没有…

github actions CICD简单使用案例

参考&#xff1a; https://developer.aliyun.com/article/1540773 https://github.com/ViggoZ/producthunt-daily-hot/blob/main/.github/workflows/generate_markdown.yml 1、创建github项目 目录&#xff1a; .github/workflows/fetch-news.yml actions执行yaml&#xff08;…

C语言 | Leetcode C语言题解之第397题整数替换

题目&#xff1a; 题解&#xff1a; //第一种动态规划:超时 // class Solution { // public: // int integerReplacement(int n) { // vector<int>dp(n1,0); // dp[1]0; // for(int i2;i<n;i){ // if(i%20){ // …

Vue接入高德地图并实现基本的路线规划功能

目录 一、申请密钥 二、安装依赖 三、代码实现 四、运行截图 五、官方文档 一、申请密钥 登录高德开放平台&#xff0c;点击我的应用&#xff0c;先添加新应用&#xff0c;然后再添加Key。 如图所示填写对应的信息&#xff0c;系统就会自动生成。 二、安装依赖 npm i am…

学生签到系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;签到信息管理&#xff0c;学生签到管理&#xff0c;班课信息管理&#xff0c;加入班课管理&#xff0c;课程信息管理 微信端账号功能包括&#xff1a;系统首…

C++(三)----内存管理

1.C/C内存分布 看下面这个问题&#xff08;考考你们之前学的咋样&#xff09;&#xff1a; int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char* pCh…

JDK 安装及配置教程(Windows)【安装】

文章目录 一、 下载1. 官网下载2. 其它渠道 二、 安装三、 配置四、 验证五、 双 JDK 环境 软件 / 环境安装及配置目录 一、 下载 1. 官网下载 安装地址&#xff1a;https://www.oracle.com/ 打开浏览器输入网址 https://www.oracle.com/index.html&#xff0c;进入 Oracle …

Python——turtle库(海龟绘图)介绍与使用

一、概述 在 Python 中&#xff0c;海龟绘图提供了一个实体“海龟”形象&#xff08;带有画笔的小机器动物&#xff09;&#xff0c;假定它在地板上平铺的纸张上画线。 二、运行环境 本文运行环境&#xff1a;Windows11&#xff0c;Python3.11&#xff0c;Pycharm2023.1.4 使…

哈佛斯坦福大学团队联合发布病理基础模型CHIEF,全面提升癌症诊断的准确性|顶刊精析·24-09-12

小罗碎碎念 今日顶刊&#xff1a;Nature 今天精读的这篇文章于24-09-04发表于Nature&#xff0c;作者来自哈佛大学、斯坦福大学。 作者角色作者姓名单位名称&#xff08;英文&#xff09;单位名称&#xff08;中文&#xff09;第一作者Xiyue WangDepartment of Biomedical Info…

如何快速清理Docker中的停止容器?

如何快速清理Docker中的停止容器? 方法一:使用`docker container prune`方法二:结合`docker ps`和`docker rm`注意(这些命令慎用,确定容器不需要之后再执行)💖The Begin💖点点关注,收藏不迷路💖 Docker容器在停止后可能会占用不必要的磁盘空间。如何清理这些停止的…

k8s以及prometheus

#生成控制器文件并建立控制器 [rootk8s-master ~]# kubectl create deployment bwmis --image timinglee/myapp:v1 --replicas 2 --dry-runclient -o yaml > bwmis.yaml [rootk8s-master ~]# kubectl expose deployment bwmis --port 80 --target-port 80 --dry-runclient…

第 9 章图像分割

图像分割是将一幅图像分割成有意义区域的过程。区域可以是图像的前景与背景或图像中一些单独的对象。这些区域可以利用一些诸如颜色、边界或近邻相似性等特征进行构建。本章中&#xff0c;我们将看到一些不同的分割技术。 9.1 图割&#xff08;Graph Cut&#xff09; 图论中的…

Hive中的分区表与分桶表详解

目录 分区表和分桶表 分区表 分区表基本语法 1. 创建分区表 2. 分区表读写数据 1&#xff09;写数据 &#xff08;1&#xff09;LOAD &#xff08;2&#xff09;INSERT 2&#xff09;读数据 3. 分区表基本操作 1&#xff09;查看所有分区信息 2&#xff09;增加分区 …

iOS 知识点记录

王巍 博客地址&#xff1a;OneVs Den git地址&#xff1a;onevcat (Wei Wang) GitHub 江湖人称喵神&#xff0c;目前就职于line。喵神的博客涉及方面比较广, 有Obejctive-C, Swift, SwiftUI, Unity等等。博客内容很有深度&#xff0c;非常值得关注。 戴铭 博客地址&#xff1…

ctf.show靶场ssrf攻略

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 web351 解析:post传入url参数他就会访问。 解法: hackbar传入url参数写入https://127.0.0.1/flag.php web352 解析:post传入url参数&#xff0c;不能是127.0.0.1和localhost 解法:缩写127.1传入 web353 解析…

数据分析与挖掘课程相关资源

这是在gitee上整的关于这门课的一个开源项目。 https://gitee.com/rainpet/python-data-analysis-and-mining-demo 头歌平台。 常见问题&#xff1a; 1、如何确认conda的版本&#xff0c;执行如下命令&#xff1a; conda list anaconda$2、实验室登陆后&#xff0c;无法上网&a…

<<编码>> 第 6 章 发报机与继电器(Telegraphs and Relays) 示例电路

##继电器 info::操作说明 注: 此处输入处未添加电源及开关, 因此不能控制继电器的开合 读者可自行添加电源及开关, 或查看后续可操作的例子 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/c…

百度视频排名代发(百度视频秒收录代发)

百度视频排名代发(百度视频秒收录代发) 代做灰色关键词百度排名&#xff08;代发百度灰色词外推&#xff09;#百度推广#关键词排名#灰色词排名 推荐阅读&#xff1a; 百家号图文排名代发&#xff1a;文章客服系统挂载电话https://www.bsw80.com/post/471.html 很多老板表示想…

Java控制台+activiti+springboot+mybatis实现账务报销工作流程

Java控制台activitispringbootmybatis实现账务报销工作流程 一、系统介绍二、功能展示1.代码展示2.员工报销3.账务审批4.总经理审批 四、其它1.其他系统实现 一、系统介绍 系统主要功能&#xff1a; 员工&#xff1a;填写报销单 账务审批&#xff1a;报销金额小于1000账务经理…