JavaScript 3D 图表

在说 3D 图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度。对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图:

image

已经能够很清晰地观察到数据的分布情况。数据如果增加一个维度,变成二维,呈现载体依然是二维的平面图:

image

数据表达依然是清晰的。但是,倘若再增加一维,这个时候就面临了两个问题:

  1. 数据的维度增加,复杂性也增大了;
  2. 计算机发展到现在,绝大多数情况下数据载体依然是二维的平面图,如何展示三维的数据呢?

这两个问题中,第一个问题从本质上说,无法解决。数据的维度越大,理解起来理所当然地,也越来越困难。

但是第二个问题,我们至少有两种解决办法。一种

[……]阅读全文

JQuery 表格插件介绍:Flexigrid 和 DataTables

image JQuery 的表格插件有很多。FlexigridDataTables 是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。

Flexigrid

官方 Flexigrid 的特性展示:

  • 列宽度可拖拽调整
  • 高度和宽度可拖拽调整
  • 列头可排序
  • 主题支持
  • 支持 XML/JSON 格式的 Ajax 数据源
  • 支持分页
  • 可以显示/隐藏列
  • 表格搜索功能
  • JavaScript API 支持

要得到这样功能丰富、美观的表格:

image

只需要这样的代码:

$("#flex1").flexigrid({
	url: 'post2.php',
	dataType: 'json',
	colMo

[……]阅读全文

Flot 介绍

image 最近在项目里面要用到 JavaScript 来绘制图表,JQuery 的插件 Flot 是一个不错的选择。和我 之前介绍过的 D3 不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。

Flot 采用 Canvas 绘制图形(Web 总共就有三种常见方式来绘制图形,不了解的同学请看 这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3 是采用 SVG 来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG 会比较流畅。

首先介绍一下数据的格式。数据来自一个数组嵌套的 JSON 格式,如:

[[0, 3], [4, 8], [8, 5], [9, 13]]

这就给

[……]阅读全文

D3 介绍

bubbleMap D3.js 是一个基于数据的操作文档的 JavaScript 库,可以让你绑定任何数据到 DOM,支持 DIV 这种图案生成,也支持 SVG 这种图案的生成(如果你对 SVG 不熟悉,请先看一下 这篇文章 ,它介绍了 SVG、VML 和 Canvas)。D3 帮助你屏蔽了浏览器差异, 做出来图案的效果可以说是炫目得一塌糊涂,可是代码却很简洁 。在我第一次听人介绍 D3 的时候,确实被其示例震撼到了,大量的例子 在这里可以找到

data_join

这是 D3 以数据为核心的一个示意图,可以简单这样来解释:有一个选择区(selection),存在若干节点(node),因此可以容纳若干数据(data),最大可容纳数据的量等于节点的个数,即数据和节点一一对应,

[……]阅读全文

网络图形标准

image 前端绘图有几种方式,主流的网络图形标准有:

  • VML,IE 支持;
  • SVG,FF、Safari 和 Opera 支持;
  • Canvas,HTML5 规范支持。

后端生成图形较为便捷,但是没法生成能够响应用户行为的动态图形(比如生成一个地图,用户点击地图上的某个城市,要显示城市信息,这通过后端图形生成很不容易做到),而且生成图形会吃掉服务端的性能。前端生成图形方面,有用 Applet、ActiveX(这两个都不是什么好东西),Flash 等等,但是现在,我们有纯文本的更好的选择。

下面会就这几种标准做一个介绍:

VML

Vector Markup Language(矢量标记语言)是一种 XML 语言,用于绘制

[……]阅读全文

back to top