Envision.js 技术文档

2024-12-20 19:59:45作者：庞队千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])：添加一个动作到交互中。