7、基于笛卡尔坐标系的图表创建指南

基于笛卡尔坐标系的图表创建指南

1. 笛卡尔坐标系图表的基础定位原理

在创建基于笛卡尔坐标系的图表时，我们需要确定元素在屏幕上的位置。首先，将数据值除以数据范围，得到的结果会在 0 到 1 之间。然后，将这个结果乘以实际的像素空间，就能确切知道元素在屏幕上的位置。具体公式如下：

xPos = CHART_PADDING + (data[i][xDataLabel]-chartInfo.x.min)/xDataRange * chartWidth;

yPos 变量的计算逻辑与 xPos 类似，只是关注的是高度方向。

2. 构建折线图

2.1 准备工作

• 准备 HTML 包装器。
• 以展示 2011 年和 2010 年 02Geek.com 网站新成员加入数量为例，收集数据并存储在两个数组中：

var a2011 = [38,65,85,111,131,160,187,180,205,146,64,212];
var a2010 = [212,146,205,180,187,131,291,42,98,61,74,69];

• 定义图表信息对象：

var chartInfo= { y:{