You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
51 lines
1.6 KiB
/**
|
|
* Line Chart
|
|
*/
|
|
class LineChart extends PointChart {
|
|
/**
|
|
* Creates a new instance of the LineChart class
|
|
*
|
|
* @param {HTMLCanvasElement} canvas - The canvas element to draw the chart on
|
|
* @param {Array<Object>} data - The data to visualize on the chart
|
|
* @param {Object} settings - The settings for the chart
|
|
* @param {ZoomManager} zoom - The zoom manager for the chart.
|
|
*/
|
|
constructor(canvas, data, settings, zoom) {
|
|
// Call the constructor of the parent class (PointChart)
|
|
super(canvas, data, settings, zoom)
|
|
}
|
|
|
|
/**
|
|
* Draws the line chart on the canvas.
|
|
*/
|
|
draw() {
|
|
// Clear the canvas and draw the axis
|
|
this.clear()
|
|
this.drawAxis()
|
|
|
|
// Iterate over each category in the data
|
|
this.data.forEach(categ => {
|
|
// Begin a new path for drawing lines
|
|
this.ctx.beginPath()
|
|
this.ctx.lineJoin = "round"
|
|
this.ctx.strokeStyle = categ.color
|
|
|
|
// Iterate over each value in the category
|
|
for (let i = 0; i < this.dataLen; i++) {
|
|
if (categ.values[i] === null) continue
|
|
|
|
// Calculate the x and y coordinates for the current value
|
|
let pos = this.getPointPos(i, categ.values[i])
|
|
|
|
this.ctx.lineTo(pos.x, pos.y)
|
|
}
|
|
this.ctx.stroke()
|
|
this.ctx.closePath()
|
|
})
|
|
|
|
// Draw points on the chart if required
|
|
if (this.settings.displayPoints)
|
|
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
|
|
}
|
|
}
|