13.8  绘制范围折线图

本实例的功能是在HTML 5网页中绘制一个范围折线图。范围折线图是指绘制上下两根折线，上部的折线用于反映统计范围内的峰值，下部的折线用于反映统计范围内的谷值，然后用某种颜色填充上下两根折线之间的封闭区域，使人能够一目了然地看清每一个绘制单位（例如每个月）中某个统计值的峰值与谷值情况。

本实例反映了2012年××啤酒瓶装类产品的销售情况，上部的折线反映每个月中的销售峰值，即最多一天能卖掉多少瓶，下部的折线反映每个月的销售谷值，即最少一天能卖掉多少瓶。实例文件8.html的具体实现代码如下。

执行后的效果如图13-8所示。

图13-8 执行效果