Envision.js 开源项目教程

2024-09-14 19:46:10作者：裴锟轩Denise

1. 项目介绍

Envision.js 是一个用于创建快速、动态和交互式 HTML5 可视化的开源库。它是由 Humble Software Development 开发的，旨在提供一种简单而强大的方式来创建各种类型的图表和可视化。Envision.js 是 HumbleFinance 库的重写版本，专门用于 HTML5 Canvas 的金融可视化。

主要特性

现代浏览器支持：支持 IE 6+ 及所有现代浏览器。
移动/触摸支持：提供对移动设备和触摸屏的支持。
预构建模板：包括 Finance 和 TimeSeries 等常见用例的模板。
框架无关：可以与其他图表库（如 Flotr2）结合使用。

2. 项目快速启动

安装

首先，通过 npm 或直接下载源码来安装 Envision.js。

npm install envisionjs

或者直接下载源码：

git clone https://github.com/HumbleSoftware/envisionjs.git

引入 Envision.js

在你的 HTML 文件中引入 Envision.js 的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Envision.js 示例</title>
    <link rel="stylesheet" href="path/to/envision.min.css">
</head>
<body>
    <div id="chart-container"></div>
    <script src="path/to/envision.min.js"></script>
    <script>
        // 你的代码将在这里
    </script>
</body>
</html>

创建一个简单的图表

使用 Envision.js 创建一个简单的 TimeSeries 图表。

var container = document.getElementById('chart-container');
var x = [];
var y1 = [];
var y2 = [];
var 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));
}

// TimeSeries 模板选项
options = {
    container: container,
    data: {
        detail: data,
        summary: data
    }
};

// 创建 TimeSeries
new envision.templates.TimeSeries(options);

3. 应用案例和最佳实践

金融图表

Envision.js 的 Finance 模板非常适合用于金融数据的展示。你可以通过自定义格式化器来调整 x 轴标签和鼠标跟踪的显示。

var financeOptions = {
    container: document.getElementById('finance-chart'),
    data: financialData,
    xaxis: {
        labels: function(value) {
            return new Date(value).toLocaleDateString();
        }
    },
    mouse: {
        track: true,
        trackFormatter: function(obj) {
            return '$' + obj.y;
        }
    }
};

new envision.templates.Finance(financeOptions);

实时数据展示

使用 TimeSeries 模板展示实时数据，并通过动画效果增强用户体验。

var realTimeOptions = {
    container: document.getElementById('real-time-chart'),
    data: realTimeData,
    animation: true
};

new envision.templates.TimeSeries(realTimeOptions);

4. 典型生态项目

Flotr2

Flotr2 是一个轻量级的图表库，Envision.js 可以与其结合使用，提供更丰富的图表类型和功能。

Underscore.js

Underscore.js 是一个 JavaScript 实用库，Envision.js 依赖于它来提供数据处理和操作功能。

Bean

Bean 是一个事件管理库，Envision.js 使用它来处理 DOM 事件。

Bonzo

Bonzo 是一个 DOM 操作库，Envision.js 使用它来简化 DOM 操作。

通过这些生态项目的结合，Envision.js 能够提供更加强大和灵活的可视化解决方案。

登录后查看全文

Envision.js 开源项目教程

1. 项目介绍

主要特性

2. 项目快速启动

安装

引入 Envision.js

创建一个简单的图表

3. 应用案例和最佳实践

金融图表

实时数据展示

4. 典型生态项目

Flotr2

Underscore.js

Bean

Bonzo

热门内容推荐

最新内容推荐

项目优选

Envision.js 开源项目教程

1. 项目介绍

主要特性

2. 项目快速启动

安装

引入 Envision.js

创建一个简单的图表

3. 应用案例和最佳实践

金融图表

实时数据展示

4. 典型生态项目

Flotr2

Underscore.js

Bean

Bonzo

相关内容推荐

热门内容推荐

最新内容推荐

项目优选