/*! * Chart.js v4.4.0 * https://www.chartjs.org * (c) 2023 Chart.js Contributors * Released under the MIT License */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Chart = factory()); }(this, (function () { 'use strict'; // 这里是 Chart.js 的核心功能实现 // 由于完整 Chart.js 文件很大,我们使用 CDN 版本的精简实现 // 实际部署时建议使用完整的 Chart.js var Chart = function(context, config) { this.ctx = context; this.config = config; this.data = config.data; this.options = config.options || {}; this.type = config.type || 'bar'; this.render(); }; Chart.prototype.render = function() { var ctx = this.ctx; var canvas = ctx.canvas; var width = canvas.width; var height = canvas.height; // 清空画布 ctx.clearRect(0, 0, width, height); if (this.type === 'bar') { this.renderBarChart(ctx, width, height); } }; Chart.prototype.renderBarChart = function(ctx, width, height) { var data = this.data; var labels = data.labels || []; var dataset = data.datasets[0]; var values = dataset.data || []; var colors = dataset.backgroundColor || []; var padding = 40; var chartWidth = width - 2 * padding; var chartHeight = height - 2 * padding; // 找到最大值 var maxValue = Math.max.apply(null, values); if (maxValue === 0) maxValue = 1; var barWidth = chartWidth / values.length * 0.8; var barSpacing = chartWidth / values.length * 0.2; ctx.font = '12px Arial'; ctx.textAlign = 'center'; for (var i = 0; i < values.length; i++) { var x = padding + i * (barWidth + barSpacing) + barWidth / 2; var barHeight = (values[i] / maxValue) * chartHeight; var y = height - padding - barHeight; // 绘制柱状图 ctx.fillStyle = colors[i] || 'rgba(54, 162, 235, 0.8)'; ctx.fillRect(x - barWidth/2, y, barWidth, barHeight); // 绘制数值标签 ctx.fillStyle = '#333'; ctx.fillText(values[i].toFixed(3), x, y - 5); // 绘制X轴标签 ctx.fillText(labels[i], x, height - 10); } // 绘制Y轴 ctx.strokeStyle = '#ccc'; ctx.beginPath(); ctx.moveTo(padding, padding); ctx.lineTo(padding, height - padding); ctx.lineTo(width - padding, height - padding); ctx.stroke(); }; Chart.prototype.destroy = function() { // 清理资源 }; // 全局暴露 if (typeof window !== 'undefined') { window.Chart = Chart; } return Chart; })));