13.6  在网页中实现一个显示提示的折线图

13.6 在网页中实现一个显示提示的折线图

本实例的功能是,使用方法obj.getPoint绘制能够显示提示的折线图。该方法能够返回一个数组,在其中保存了如下信息。

■绘制统计图对象的<canvas>元素。

■获得鼠标焦点的连接点在X轴上的坐标点。

■获得鼠标焦点的连接点在Y轴上的坐标点。

■获得鼠标焦点的连接点的序号,标示第几个连接点获得了鼠标焦点。

当本实例连接点获得鼠标焦点时,鼠标指针会从指针形状变成手指形状,该连接点处也会突出显示一个蓝色实心圆,同时出现一个工具条提示信息,说明该连接点是水平坐标轴上哪一个绘制单位的连接点,在本实例的工具条提示中显示月份信息。

978-7-111-53392-4-Part04-61.jpg

实例文件6.html的实现代码如下。

978-7-111-53392-4-Part04-62.jpg

978-7-111-53392-4-Part04-63.jpg

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

978-7-111-53392-4-Part04-64.jpg

图13-6 执行效果