日期：2012-4-7  来源：GBin1.com

在线演示  本地下载

今天我们介绍一个超棒的创建快速动态互动HTML5可视化图形效果的javascript类库 - Envision.js，这个类库拥有俩个内建的图表类型：

• 时间序列图表
• 金融图形图表

主要特性

• 实时图形展示
• 时间序列，支持缩放，内建互动操作
• 金融类型图表，可定制
• 支持AJAX
• 自定义图形图表，例如，不规则碎片形
• 支持现代浏览器，IE6+
• 支持移动及其触摸设备
• 拥有自定图形API
• 兼容支持Flotr2
• 可兼容其他
• 基于Flotr2 和HTML5画布

如何使用

引入如下类库和CSS文件：

一个简单的例子：

  
    
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        margin: 8px auto;
      }
    
    
  
  
    

    <!--[if IE]>
    
        
    
      (function () {

        var
          container = document.getElementById('container'),
          x = [],
          y1 = [],
          y2 = [],
          data, options, i;

        // Data Format:
        data = [
          [x, y1], // First Series
          [x, y2]  // Second Series
        ];

        // Sample the sine function for data
        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));

        // TimeSeries Template Options
        ptions = {
          // Container to render inside of
          container : container,
          // Data for detail (top chart) and summary (bottom chart)
          data : {
            detail : data,
            summary : data
          }
        };

        // Create the TimeSeries
        new envision.templates.TimeSeries(options);

      })();
    
  
 

API文档：http://www.humblesoftware.com/envision/documentation

希望大家喜欢这个类库！

来源：分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js