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.
64 lines
2.2 KiB
64 lines
2.2 KiB
/**
|
|
* Area Chart
|
|
*/
|
|
class AreaChart extends PointChart {
|
|
/**
|
|
* Creates a new instance of the AreaChart 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 area 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
|
|
|
|
let xmax = 0 // rightmost point (some lines can be shorter)
|
|
// Iterate over each value in the category
|
|
for (let i = 0; i < this.dataLen; i++) {
|
|
// Skip empty points
|
|
if (categ.values[i] === null) continue
|
|
|
|
// Calculate the x and y coordinates for the current value
|
|
let pos = this.getPointPos(i, categ.values[i])
|
|
xmax = pos.x
|
|
|
|
this.ctx.lineTo(pos.x, pos.y)
|
|
}
|
|
this.ctx.stroke()
|
|
|
|
// Complete the area by drawing lines to the x-axis and back to the starting point
|
|
this.ctx.lineTo(xmax, this.zoomBounds.xAxis)
|
|
this.ctx.lineTo(this.zoomBounds.left, this.zoomBounds.xAxis)
|
|
this.ctx.globalAlpha = 0.5
|
|
this.ctx.fillStyle = categ.color
|
|
this.ctx.closePath()
|
|
this.ctx.fill()
|
|
|
|
// Reset global alpha for future drawings
|
|
this.ctx.globalAlpha = 1
|
|
})
|
|
|
|
// Draw points on the chart if required
|
|
if (this.settings.displayPoints)
|
|
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
|
|
}
|
|
}
|