Envision.js 技术文档
2024-12-15 21:32:40作者:庞队千Virginia
1. 安装指南
Envision.js 是一个快速交互的 HTML5 图表库,支持现代浏览器(包括 IE 6+)和移动设备。以下是安装指南:
- 下载 Envision.js 的最新版本。
- 将
envision.min.js
和envision.min.css
文件包含到您的页面中。
<script src="path/to/envision.min.js"></script>
<link rel="stylesheet" href="path/to/envision.min.css">
Envision.js 已经包含了所有依赖项,包括 underscore.js、bean、bonzo 和 Flotr2。
2. 项目使用说明
使用模板
Envision.js 提供了预建的模板,用于常见用例。以下是一个示例:
var container = document.getElementById('container');
var x = [], y1 = [], y2 = [], data, options, i;
// 数据格式:
data = [
[x, y1], // 第一个序列
[x, y2] // 第二个序列
];
// 生成数据
for (i = 0; i < 4 * Math.PI; i += 0.05) {
x.push(i);
y1.push(Math.sin(i));
y2.push(Math.sin(i + Math.PI));
}
// 时间序列模板选项
options = {
container: container,
data: {
detail: data,
summary: data
}
};
// 创建时间序列
new envision.templates.TimeSeries(options);
自定义可视化
开发者可以使用 Envision.js API 来构建自定义可视化。以下是一个示例:
var container = document.getElementById('container');
var x = [], y1 = [], y2 = [], data, i,
detail, detailOptions,
summary, summaryOptions,
vis, selection;
// 数据格式:
data = [
[x, y1], // 第一个序列
[x, y2] // 第二个序列
];
// 生成数据
for (i = 0; i < 4 * Math.PI; i += 0.05) {
x.push(i);
y1.push(Math.sin(i));
y2.push(Math.sin(i + Math.PI));
}
x.push(4 * Math.PI);
y1.push(Math.sin(4 * Math.PI));
y2.push(Math.sin(4 * Math.PI));
// 配置详细视图
detailOptions = {
name: 'detail',
data: data,
height: 150,
flotr: {
yaxis: {
min: -1.1,
max: 1.1
}
}
};
// 配置摘要视图
summaryOptions = {
name: 'summary',
data: data,
height: 150,
flotr: {
yaxis: {
min: -1.1,
max: 1.1
},
selection: {
mode: 'x'
}
}
};
// 构建自定义可视化
vis = new envision.Visualization();
detail = new envision.Component(detailOptions);
summary = new envision.Component(summaryOptions);
interaction = new envision.Interaction();
// 渲染可视化
vis
.add(detail)
.add(summary)
.render(container);
// 连接交互
interaction
.leader(summary)
.follower(detail)
.add(envision.actions.selection);
3. 项目 API 使用文档
以下是 Envision.js 的主要 API 类和方法的说明:
Class envision.Component
定义一个可视化组件。
-
配置:
name
:组件名称。element
:组件的容器元素。height
:显式组件高度。width
:显式组件宽度。data
:数据数组。skipPreprocess
:跳过数据预处理。adapter
:适配器对象。adapterConstructor
:适配器构造函数。adapterCallback
:返回适配器的回调函数。config
:适配器配置。
-
方法:
render ([element])
:渲染组件。draw ([data], [options])
:绘制组件。trigger ()
:在组件的 API 上触发事件。attach ()
:连接到组件 API 上的事件。detach ()
:从组件 API 上的事件中分离监听器。destroy ()
:销毁组件。
Class envision.Visualization
定义一个由组件组成的可视化。
-
配置:
name
:可视化名称。element
:可视化的容器元素。
-
方法:
render ([element])
:渲染可视化。add (component)
:向可视化中添加组件。remove ()
:从可视化中移除组件。setPosition (component, newIndex)
:重新排序组件。indexOf (component)
:获取组件位置。getComponent (component)
:获取位置上的组件。isFirst (component)
:判断组件是否是第一个组件。isLast (component)
:判断组件是否是最后一个组件。destroy ()
:销毁可视化。
Class envision.Preprocessor
数据预处理。
-
配置:
data
:要处理的数据。
-
方法:
getData ()
:返回数据。setData ()
:设置数据对象。length ()
:返回数据集的长度。bound (min, max)
:将数据集限制在范围内。subsampleMinMax (resolution)
:使用 MinMax 进行数据下采样。subsample (resolution)
:以固定间隔进行数据下采样。
Class envision.Interaction
定义组件间的交互。
-
配置:
leader
:触发交互的组件。
-
方法:
leader (component)
:添加一个作为交互领导的组件。follower (component)
:添加一个作为交互跟随者的组件。group (components)
:将一个组件数组添加为跟随者和领导者。add (action, [options])
:添加一个动作到交互中。
4. 项目安装方式
Envision.js 的安装方式已在“安装指南”部分说明。您可以通过以下方式包含 Envision.js 到您的项目中:
- 下载 Envision.js 的最新版本。
- 将
envision.min.js
和envision.min.css
文件包含到您的页面中。
确保在页面中正确引用这些文件,以便能够使用 Envision.js 的功能。
热门项目推荐
相关项目推荐
- PDFMathTranslatePDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译,支持 Google/DeepL/Ollama/OpenAI 等服务,提供 CLI/GUI/DockerPython03
- topiam-eiam开源IDaas/IAM平台,用于管理企业内员工账号、权限、身份认证、应用访问,帮助整合部署在本地或云端的内部办公系统、业务系统及三方 SaaS 系统的所有身份,实现一个账号打通所有应用的服务。Java00
- 每日精选项目🔥🔥 12.24日推荐:高性能 C 语言 UI 布局库🔥🔥 每日推荐行业内最新、增长最快的项目,快速了解行业最新热门项目动态~~017
- excelizehttps://github.com/xuri/excelize Excelize 是 Go 语言编写的一个用来操作 Office Excel 文档类库,基于 ECMA-376 OOXML 技术标准。可以使用它来读取、写入 XLSX 文件,相比较其他的开源类库,Excelize 支持操作带有数据透视表、切片器、图表与图片的 Excel 并支持向 Excel 中插入图片与创建简单图表,目前是 Go 开源项目中唯一支持复杂样式 XLSX 文件的类库,可应用于各类报表平台、云计算和边缘计算系统。Go02
- Cangjie-Examples本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。Cangjie039
- 毕方Talon工具本工具是一个端到端的工具,用于项目的生成IR并自动进行缺陷检测。Python039
- advanced-javaAdvanced-Java是一个Java进阶教程,适合用于学习Java高级特性和编程技巧。特点:内容深入、实例丰富、适合进阶学习。JavaScript0102
- taro开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/TypeScript010
- Yi-CoderYi Coder 编程模型,小而强大的编程助手HTML012
- CommunityCangjie-TPC(Third Party Components)仓颉编程语言三方库社区资源汇总05
热门内容推荐
最新内容推荐
项目优选
收起
openHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
46
37
PDFMathTranslate
PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译,支持 Google/DeepL/Ollama/OpenAI 等服务,提供 CLI/GUI/Docker
Python
30
3
Cangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
171
39
HarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
249
63
RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
24
17
CangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
892
0
杨帆测试平台
扬帆测试平台是一款高效、可靠的自动化测试平台,旨在帮助团队提升测试效率、降低测试成本。该平台包括用例管理、定时任务、执行记录等功能模块,支持多种类型的测试用例,目前支持API(http和grpc协议)、性能、CI调用等功能,并且可定制化,灵活满足不同场景的需求。 其中,支持批量执行、并发执行等高级功能。通过用例设置,可以设置用例的基本信息、运行配置、环境变量等,灵活控制用例的执行。
JavaScript
11
2
advanced-java
Advanced-Java是一个Java进阶教程,适合用于学习Java高级特性和编程技巧。特点:内容深入、实例丰富、适合进阶学习。
JavaScript
391
102