Envision.js 技术文档

1. 安装指南

Envision.js 是一个快速交互的 HTML5 图表库，支持现代浏览器（包括 IE 6+）和移动设备。以下是安装指南：

1. 下载 Envision.js 的最新版本。
2. 将 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 到您的项目中：

1. 下载 Envision.js 的最新版本。
2. 将 envision.min.js 和 envision.min.css 文件包含到您的页面中。

确保在页面中正确引用这些文件，以便能够使用 Envision.js 的功能。