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

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

在数据可视化领域，基于笛卡尔坐标系创建各种图表是一项重要技能。本文将详细介绍如何创建折线图、瀑布图等，并对代码进行优化，以实现更灵活的图表渲染。

1. 确定元素位置的基本原理

在笛卡尔坐标系中，要确定元素在屏幕上的位置，我们需要将数据值与图表的实际空间进行映射。具体步骤如下：
- 计算数据值与数据范围的比例，该比例值始终在 0 到 1 之间。
- 将该比例值乘以可用的实际像素空间，得到元素在屏幕上的相对位置。
- 最后加上图表的起始点（填充值），得到元素的最终位置。

示例代码如下：

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

y 坐标的计算逻辑与 x 坐标相同，只是关注的是高度方向。

2. 构建折线图

折线图基于散点图，与散点图展示两个变量之间的孤立关联不同，折线图能从多个方面讲述数据的故事，常用于网站统计、随时间跟踪事物变化等场景。

2.1 准备工作

首先，准备好 HTML 包装器，并基于之前创建散点图的代码进行修改。这里以展示 2011 年和 2010 年每月新加入 02Geek.com 网站的会员数量为例，数据存储在两个数组中：

var a2011 = [38,65,85,111,131