html画折线图坐标显示,7.4 通过折线图标记数据点 - HTML5 Canvas 实战

如果你曾经上过科学课，你可能对根据一套实验数据生成折线图比较熟悉。在反映数据趋势时，折线图可能是最有用的数据可视化工具之一。本节，我们将创建一个可配置的折线图，它接受一个数据元素的数组，并在使用线段连接每个点的过程中，标记每个点。

图7-4 通过折线图标注数据点

操作步骤

按照以下步骤，创建一个Line Chart类，它能够根据一个数据的数组自动定位并设置折线图的尺寸：

1. 定义LineChart类的构造绘制，该函数绘制x轴和y轴：

function LineChart(config){

//用户自定义属性

this.canvas  = document.getElementById(config.canvasId);

this.minX  = config.minX;

this.minY  = config.minY;

this.maxX  = config.maxX;

this.maxY  = config.maxY;

this.unitsPerTickX  = config.unitsPerTickX;

this.unitsPerTickY  = config.unitsPerTickY;

// constants

this.padding  =  10;

this.tickSize  =  10;

this.axisColor  = "#555";

this.pointRadius  =  5;

this.font  = "12pt Calibri";

/* 由于measureText没有提供文本高度的度量值

* 所以，我们不得不通过硬编码来指定文本高度的值

*/

this.fontHeight  =  12;

// relationships

this.context  = this.canvas.getContext("2d");

this.rangeX  = this.maxX  - this.minY;

this.rangeY  = this.maxY  - this.minY;

this.numXTicks  = Math.round(this.rangeX  / this.unitsPerTickX);

this.numYTicks  = Math.round(this.rangeY  / this.unitsPerTickY);

this.x  = this.getLongestValueWidth()  + this.padding  *  2;

this.y  = this.padding  *  2;

this.width  = this.canvas.width  - this.x  - this.padding  *  2;

this.height  = this.canvas.height  - this.y  - this.p