在网页浏览器中创建2D图表的需求日益增长，为了满足这一需求，开发了一个简单的图表库。今天，决定将这个库分享给全世界。这个库利用了HTML5的<canvas>标签和jQueryUI库，后者用于为每个图表创建对话框。
使用这个库非常简单。只需要准备四组数据数组：
重要的是，XData和YData数组中的数据项数量必须相同。这是理所当然的。这四组数据是JavaScript对象的值，代表图表。这个对象还应该有一个Type属性，其值为'line'。这是因为计划为绘制2D和3D图表提供一个统一的起点。关于三维图表，将很快发布。
单个图表的数据对象应该像这样：
{
Type: 'line',
XAxis: [0, 1],
XData: [...],
YAxis: [0, 1],
YData: [...]
}
但是，库可以同时显示多个图表，因此这个图表数据对象必须添加到字典中。字典的键也将作为图表名称和画布ID，因此不能是任何不允许作为DOM元素ID的值。
名为'Test1'的单个图表的字典应该类似于以下示例：
{
"Test1": { Type: 'line', XAxis: [0, 1], XData: [...], YAxis: [0, 1], YData: [...] }
}
图表数据字典应该作为参数传递给figuresDrawer.draw函数。这就是开始使用库之前需要知道的所有内容。
例如，编写了一个JavaScript白噪声生成器：
$(function() {
YData = [];
XData = [];
var length = 100;
for (var i = 0; i < length; i++) {
YData.push(Math.random());
XData.push(i / length);
}
figuresDrawer.draw({
"Test1": { Type: 'line', XAxis: [0, 1], XData: XData, YAxis: [0, 1], YData: YData }
});
});
结果，将在jQueryUI对话框中看到图表。
要对图表进行更多配置，可以在figuresConfig.js文件中更改值。
由于jQueryUI库允许调整对话框的大小，图表也可以调整大小。在这个配置文件中，可以选择新对话框的默认宽度和高度值。
this.default2dHeight = 400;
this.default2dWidth = 600;
'partialCanvasId'值只是图表画布标签ID的模板。可以更改它，但这不会影响图表的功能。决定把它放在这里，因为需要在2D图表和3D图表中统一使用。
更有趣的配置值在Figures2d.js文件中。
所以，更改代码为...
var __axis_numbers_size = 20;
var __axis_numbers_style = __axis_numbers_size.toString() + "pt Times New Roman";
...将字体设置为20pt大小的Times New Roman字体。接下来的四个变量是颜色：
更改代码后：
var __figure_bg_color = "black";
var __figure_grid_bg_color = "gray";
var __axes_color = "White";
var __plot_color = "#FF0000";
将看到黑色图表背景，白色轴和红色图表线条在灰色背景上。可以更改它，但认为默认值更漂亮。