Envision.js 开源项目教程

2024-09-14 10:00:17作者：裴锟轩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);