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
/**
|
|
* Donut Chart
|
|
*/
|
|
class DonutChart extends PieChart {
|
|
/**
|
|
* Creates a new instance of the DonutChart 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 (Chart)
|
|
super(canvas, data, settings, zoom)
|
|
}
|
|
|
|
/**
|
|
* Draws the donut chart on the canvas.
|
|
*/
|
|
draw() {
|
|
// Starting angle for the current donut slice
|
|
let start_angle = 0
|
|
// Total value of all data categories to calculate percentages
|
|
let total_value = 0
|
|
|
|
// Calculate the total value of all data categories
|
|
this.data.forEach(categ => {
|
|
let val = categ.values[0]
|
|
if (val !== null)
|
|
total_value += val
|
|
})
|
|
|
|
// Clear the canvas before drawing
|
|
this.clear()
|
|
|
|
// Iterate over each data category to draw the donut slices
|
|
this.data.forEach((categ, colId) => {
|
|
// The value of the current slice
|
|
let val = categ.values[0]
|
|
// Angle for the current donut slice
|
|
let slice_angle = 2 * Math.PI * val / total_value
|
|
|
|
// Calculate the center and radius of the donut chart
|
|
let x = this.canvas.width / 2
|
|
let y = this.canvas.height / 2
|
|
let r = Math.min(this.bounds.width / 2, this.bounds.height / 2)
|
|
let end_angle = start_angle + slice_angle
|
|
|
|
this.ctx.fillStyle = categ.color
|
|
let new_slice = new DonutSlice(this.ctx, val + " (" + Math.round(val / total_value * 100) + "%)", colId, x, y, r, start_angle, end_angle, r / 2)
|
|
new_slice.draw()
|
|
this.objects.push(new_slice)
|
|
|
|
// Update the start angle for the next donut slice
|
|
start_angle = end_angle
|
|
})
|
|
|
|
// Draw the chart title if displayTitle is enabled
|
|
if (this.settings.displayTitle)
|
|
this.drawTitle()
|
|
}
|
|
}
|