这次介绍的依然是一个生成Chart的js：Protochart。这个JS基于Prototype，也是采用canvas实现。
首先介绍用法。毫无疑问第一步当然就是导入必须的js。这里用到三个js，prototype.js，excanvas.js和ProtoChart.js。跟Canvas Pie Chart with Tooltips里的moocanvas.js差不多，excanvas.js也是用来弥补IE不支持canvas的问题。实例里的excanvas.js和ProtoChart.js都是用的压缩版。另外实例里还导入了data.js这个文件，这个js会生成随机的数据用来生成Chart。
然后开始调用方法生成Chart，这里以饼图为例。调用的是Proto.Chart方法，它接受三个参数：elem，data，options。elem就是用来放Chart的容器，data就是生成Chart的数据，options则是关于Chart的一些设置。这里要生成pie chart，所以options里会有pie的设置。详细的options会在下面介绍。
装载Chart的容器如下：
最后的效果如上图所示。
参数（从js文件里copy出来的）：
* colors:
* {Array} - pass in a array which contains strings of colors you want to use. Default has 6 color set.
*
* legend:
* {BOOL} - show - if you want to show the legend. Default is false
* {integer} - noColumns - Number of columns for the legend. Default is 1
* {function} - labelFormatter - A function that returns a string. The function is called with a string and is expected to return a string. Default = null
* {string} - labelBoxBorderColor - border color for the little label boxes. Default #CCC
* {HTMLElem} - container - an HTML id or HTML element where the legend should be rendered. If left null means to put the legend on top of the Chart
* {string} - position - position for the legend on the Chart. Default value 'ne'
* {integer} - margin - default valud of 5
* {string} - backgroundColor - default to null (which means auto-detect)
* {float} - backgroundOpacity - leave it 0 to avoid background
*
* xaxis (yaxis) options:
* {string} - mode - default is null but you can pass a string "time" to indicate time series
* {integer} - min
* {integer} - max
* {float} - autoscaleMargin - in % to add if auto-setting min/max
* {mixed} - ticks - either [1, 3] or [[1, "a"], 3] or a function which gets axis info and returns ticks
* {function} - tickFormatter - A function that returns a string as a tick label. Default is null
* {float} - tickDecimals
* {integer} - tickSize
* {integer} - minTickSize
* {array} - monthNames
* {string} - timeformat
*
* Points / Lines / Bars options:
* {bool} - show, default is false
* {integer} - radius: default is 3
* {integer} - lineWidth : default is 2
* {bool} - fill : default is true
* {string} - fillColor: default is #ffffff
*
* Grid options:
* {string} - color
* {string} - backgroundColor - defualt is *null*
* {string} - tickColor - default is *#dddddd*
* {integer} - labelMargin - should be in pixels default is 3
* {integer} - borderWidth - default *1*
* {bool} - clickable - default *null* - pass in TRUE if you wish to monitor click events
* {mixed} - coloredAreas - default *null* - pass in mixed object eg. {x1, x2}
* {string} - coloredAreasColor - default *#f4f4f4*
* {bool} - drawXAxis - default *true*
* {bool} - drawYAxis - default *true*
*
* selection options:
* {string} - mode : either "x", "y" or "xy"
* {string} - color : string
*/
也可以在文档里看到，要看这个js的所有方法也可以到文档页面查看。另外Options好像没有记录全，例如pie和mouse等就没有记载到。
相关网站：
Website：Protochart
Google Code:http://code.google.com/p/protochart/
浏览器兼容：IE6/7，FF2/3和Safari
下载：
可以在以上两个地方下载。ProtoChart-min.js点这里下载，例子里用到的data.js可以在这里下载。
有bug要上报的话可以在这里进行提交。
下面我们看下一些具体的实例以及一些高级的功能，如动态Chart，选取以及click事件处理等等。
