|
|
@@ -0,0 +1,1130 @@
|
|
|
+// 图表实例，方便后续更新
|
|
|
+window.chartInstance = null;
|
|
|
+
|
|
|
+// 注册Chart.js插件
|
|
|
+if (Chart && Chart.register) {
|
|
|
+ // 如果有ChartDataLabels插件，注册它
|
|
|
+ if (window.ChartDataLabels) {
|
|
|
+ Chart.register(ChartDataLabels);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 生成图表的主函数
|
|
|
+function createChart(data, settings) {
|
|
|
+ // 获取Canvas元素
|
|
|
+ const canvas = document.getElementById('chart-canvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 如果已有图表，先销毁
|
|
|
+ if (window.chartInstance) {
|
|
|
+ window.chartInstance.destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 应用颜色方案
|
|
|
+ applyColorScheme(data, settings.colorScheme, settings.type);
|
|
|
+
|
|
|
+ // 配置图表选项
|
|
|
+ const options = getChartOptions(settings);
|
|
|
+
|
|
|
+ // 处理特殊图表类型
|
|
|
+ let type = settings.type;
|
|
|
+ let chartData = {...data};
|
|
|
+
|
|
|
+ // 检查是否为首系列图表类型
|
|
|
+ const isFirstSeriesOnly = settings.type.includes(" (首系列)");
|
|
|
+ if (isFirstSeriesOnly) {
|
|
|
+ // 提取真正的图表类型
|
|
|
+ type = settings.type.replace(" (首系列)", "");
|
|
|
+
|
|
|
+ // 只保留第一个数据系列
|
|
|
+ if (chartData.datasets.length > 1) {
|
|
|
+ const firstDataset = chartData.datasets[0];
|
|
|
+ chartData.datasets = [{
|
|
|
+ ...firstDataset,
|
|
|
+ label: firstDataset.label || '数据'
|
|
|
+ }];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除可能存在的旧堆叠设置
|
|
|
+ if (options.scales && options.scales.x) {
|
|
|
+ delete options.scales.x.stacked;
|
|
|
+ }
|
|
|
+ if (options.scales && options.scales.y) {
|
|
|
+ delete options.scales.y.stacked;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除旧的填充设置和其他特殊属性
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ delete dataset.fill;
|
|
|
+ delete dataset.tension;
|
|
|
+ delete dataset.stepped;
|
|
|
+ delete dataset.borderDash;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 基本图表类型处理
|
|
|
+ switch(type) {
|
|
|
+ // 柱状图系列
|
|
|
+ case 'horizontalBar':
|
|
|
+ type = 'bar';
|
|
|
+ options.indexAxis = 'y';
|
|
|
+ break;
|
|
|
+ case 'stackedBar':
|
|
|
+ type = 'bar';
|
|
|
+ if (!options.scales) options.scales = {};
|
|
|
+ if (!options.scales.x) options.scales.x = {};
|
|
|
+ if (!options.scales.y) options.scales.y = {};
|
|
|
+ options.scales.x.stacked = true;
|
|
|
+ options.scales.y.stacked = true;
|
|
|
+ break;
|
|
|
+ case 'groupedBar':
|
|
|
+ type = 'bar';
|
|
|
+ // 分组柱状图是默认行为
|
|
|
+ break;
|
|
|
+ case 'gradientBar':
|
|
|
+ type = 'bar';
|
|
|
+ // 渐变效果在applyColorScheme函数中处理
|
|
|
+ break;
|
|
|
+ case 'barWithError':
|
|
|
+ type = 'bar';
|
|
|
+ // 添加误差线
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.errorBars = {
|
|
|
+ y: {
|
|
|
+ plus: dataset.data.map(() => Math.random() * 5 + 2),
|
|
|
+ minus: dataset.data.map(() => Math.random() * 5 + 2)
|
|
|
+ }
|
|
|
+ };
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'rangeBar':
|
|
|
+ type = 'bar';
|
|
|
+ // 转换数据为范围格式
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.data = dataset.data.map(value => {
|
|
|
+ const min = Math.max(0, value - Math.random() * value * 0.4);
|
|
|
+ return [min, value];
|
|
|
+ });
|
|
|
+ });
|
|
|
+ break;
|
|
|
+
|
|
|
+ // 线/面积图系列
|
|
|
+ case 'area':
|
|
|
+ type = 'line';
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.fill = true;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'curvedLine':
|
|
|
+ type = 'line';
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.tension = 0.4; // 更平滑的曲线
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'stepLine':
|
|
|
+ type = 'line';
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.stepped = true;
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'stackedArea':
|
|
|
+ type = 'line';
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.fill = true;
|
|
|
+ });
|
|
|
+ if (!options.scales) options.scales = {};
|
|
|
+ if (!options.scales.y) options.scales.y = {};
|
|
|
+ options.scales.y.stacked = true;
|
|
|
+ break;
|
|
|
+ case 'streamgraph':
|
|
|
+ type = 'line';
|
|
|
+ // 流图效果：堆叠面积图 + 居中对齐
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.fill = true;
|
|
|
+ });
|
|
|
+ if (!options.scales) options.scales = {};
|
|
|
+ if (!options.scales.y) options.scales.y = {};
|
|
|
+ options.scales.y.stacked = true;
|
|
|
+ options.scales.y.offset = true; // 居中对齐堆叠
|
|
|
+ break;
|
|
|
+ case 'timeline':
|
|
|
+ type = 'line';
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.stepped = 'before';
|
|
|
+ dataset.borderDash = [5, 5]; // 虚线效果
|
|
|
+ });
|
|
|
+ break;
|
|
|
+
|
|
|
+ // 饼图/环形图系列
|
|
|
+ case 'halfPie':
|
|
|
+ type = 'doughnut';
|
|
|
+ options.circumference = Math.PI;
|
|
|
+ options.rotation = -Math.PI / 2;
|
|
|
+ break;
|
|
|
+ case 'nestedPie':
|
|
|
+ type = 'doughnut';
|
|
|
+ // 嵌套效果通过多个饼图叠加实现，简化实现仅调整内外半径
|
|
|
+ if (chartData.datasets.length > 0) {
|
|
|
+ chartData.datasets[0].radius = '70%';
|
|
|
+ chartData.datasets[0].weight = 0.7;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ // 散点/气泡图系列
|
|
|
+ case 'scatter':
|
|
|
+ chartData.datasets = transformScatterData(chartData.datasets);
|
|
|
+ break;
|
|
|
+ case 'bubble':
|
|
|
+ chartData.datasets = transformBubbleData(chartData.datasets);
|
|
|
+ type = 'bubble';
|
|
|
+ break;
|
|
|
+ case 'scatterSmooth':
|
|
|
+ chartData.datasets = transformScatterData(chartData.datasets);
|
|
|
+ type = 'scatter';
|
|
|
+ // 添加趋势线
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ const smoothedDataset = {
|
|
|
+ ...dataset,
|
|
|
+ type: 'line',
|
|
|
+ data: [...dataset.data],
|
|
|
+ pointRadius: 0,
|
|
|
+ tension: 0.4,
|
|
|
+ fill: false
|
|
|
+ };
|
|
|
+ chartData.datasets.push(smoothedDataset);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+
|
|
|
+ // 专业图表系列
|
|
|
+ case 'funnel':
|
|
|
+ type = 'bar';
|
|
|
+ // 简化的漏斗图实现
|
|
|
+ options.indexAxis = 'y';
|
|
|
+ if (chartData.datasets.length > 0) {
|
|
|
+ // 对数据进行排序
|
|
|
+ const sortedData = [...chartData.datasets[0].data].sort((a, b) => b - a);
|
|
|
+ chartData.datasets[0].data = sortedData;
|
|
|
+ // 确保Y轴反转
|
|
|
+ if (!options.scales) options.scales = {};
|
|
|
+ if (!options.scales.y) options.scales.y = {};
|
|
|
+ options.scales.y.reverse = true;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'gauge':
|
|
|
+ type = 'doughnut';
|
|
|
+ // 简化的仪表盘实现
|
|
|
+ if (chartData.datasets.length > 0 && chartData.datasets[0].data.length > 0) {
|
|
|
+ const value = chartData.datasets[0].data[0];
|
|
|
+ const max = Math.max(...chartData.datasets[0].data) * 1.2;
|
|
|
+ const remainder = max - value;
|
|
|
+
|
|
|
+ chartData.datasets[0].data = [value, remainder];
|
|
|
+ chartData.datasets[0].backgroundColor = ['#36A2EB', '#E0E0E0'];
|
|
|
+ chartData.labels = ['Value', ''];
|
|
|
+
|
|
|
+ options.circumference = Math.PI;
|
|
|
+ options.rotation = -Math.PI;
|
|
|
+ options.cutout = '70%';
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'boxplot':
|
|
|
+ // 简化的箱线图实现（基于柱状图）
|
|
|
+ type = 'bar';
|
|
|
+ // 转换数据为箱线图格式
|
|
|
+ chartData.datasets.forEach(dataset => {
|
|
|
+ dataset.data = dataset.data.map(value => {
|
|
|
+ const q1 = Math.max(0, value * 0.7);
|
|
|
+ const median = value * 0.85;
|
|
|
+ const q3 = value * 1.15;
|
|
|
+ const min = Math.max(0, q1 - (median - q1));
|
|
|
+ const max = q3 + (q3 - median);
|
|
|
+ return [min, q1, median, q3, max];
|
|
|
+ });
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'waterfall':
|
|
|
+ type = 'bar';
|
|
|
+ // 瀑布图实现
|
|
|
+ if (chartData.datasets.length > 0) {
|
|
|
+ const data = chartData.datasets[0].data;
|
|
|
+ let cumulative = 0;
|
|
|
+
|
|
|
+ // 创建新的数据数组，包含每个点的起点和终点
|
|
|
+ const waterfallData = data.map((value, index) => {
|
|
|
+ const start = cumulative;
|
|
|
+ cumulative += value;
|
|
|
+ return {
|
|
|
+ start: start,
|
|
|
+ end: cumulative,
|
|
|
+ value: value
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 转换为柱状图数据
|
|
|
+ chartData.datasets[0].data = waterfallData.map(d => d.end - d.start);
|
|
|
+
|
|
|
+ // 添加起点数据集
|
|
|
+ chartData.datasets.push({
|
|
|
+ label: '起点',
|
|
|
+ data: waterfallData.map(d => d.start),
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ borderColor: 'rgba(0,0,0,0)',
|
|
|
+ stack: 'waterfall'
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置为堆叠柱状图
|
|
|
+ if (!options.scales) options.scales = {};
|
|
|
+ if (!options.scales.x) options.scales.x = {};
|
|
|
+ if (!options.scales.y) options.scales.y = {};
|
|
|
+ options.scales.x.stacked = true;
|
|
|
+ options.scales.y.stacked = true;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'treemap':
|
|
|
+ case 'sunburst':
|
|
|
+ case 'sankey':
|
|
|
+ case 'chord':
|
|
|
+ case 'network':
|
|
|
+ // 这些高级图表需要专门的库支持，这里简化为提示信息
|
|
|
+ type = 'bar';
|
|
|
+ if (chartData.datasets.length > 0) {
|
|
|
+ // 显示一个提示信息
|
|
|
+ chartData.datasets = [{
|
|
|
+ label: `${settings.type}需要专门的图表库支持`,
|
|
|
+ data: [100],
|
|
|
+ backgroundColor: '#f8d7da'
|
|
|
+ }];
|
|
|
+ chartData.labels = ['请尝试其他图表类型'];
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 热力图特殊处理
|
|
|
+ if (type === 'heatmap') {
|
|
|
+ // 热力图不是Chart.js的标准类型，需要使用插件或自定义渲染
|
|
|
+ // 简单实现一个基于颜色渐变的矩阵图
|
|
|
+ type = 'matrix';
|
|
|
+ renderHeatmap(ctx, chartData, options);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 饼图、环形图和极地面积图特殊处理 (如果不是由其他类型转换而来的)
|
|
|
+ if (['pie', 'doughnut', 'polarArea'].includes(type) && !['halfPie', 'nestedPie', 'gauge'].includes(settings.type) && !isFirstSeriesOnly) {
|
|
|
+ // 如果有多个数据集，只取第一个
|
|
|
+ if (chartData.datasets.length > 1) {
|
|
|
+ const firstDataset = chartData.datasets[0];
|
|
|
+ chartData.datasets = [{
|
|
|
+ ...firstDataset,
|
|
|
+ label: undefined // 这些图表类型不需要数据集标签
|
|
|
+ }];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建图表实例
|
|
|
+ window.chartInstance = new Chart(ctx, {
|
|
|
+ type: type,
|
|
|
+ data: chartData,
|
|
|
+ options: options
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置标记属性，表示图表已渲染，去除背景
|
|
|
+ canvas.setAttribute('data-chart-rendered', 'true');
|
|
|
+
|
|
|
+ return window.chartInstance;
|
|
|
+}
|
|
|
+
|
|
|
+// 辅助函数：获取当前图表实例
|
|
|
+function getChartInstance() {
|
|
|
+ return window.chartInstance;
|
|
|
+}
|
|
|
+
|
|
|
+// 辅助函数：设置当前图表实例
|
|
|
+function setChartInstance(instance) {
|
|
|
+ window.chartInstance = instance;
|
|
|
+}
|
|
|
+
|
|
|
+// 获取图表配置选项
|
|
|
+function getChartOptions(settings) {
|
|
|
+ const options = {
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ plugins: {
|
|
|
+ title: {
|
|
|
+ display: !!settings.title,
|
|
|
+ text: settings.title,
|
|
|
+ font: {
|
|
|
+ size: 18,
|
|
|
+ weight: 'bold'
|
|
|
+ },
|
|
|
+ padding: {
|
|
|
+ top: 10,
|
|
|
+ bottom: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ display: settings.legendPosition !== 'none',
|
|
|
+ position: settings.legendPosition === 'none' ? 'top' : settings.legendPosition,
|
|
|
+ labels: {
|
|
|
+ usePointStyle: true,
|
|
|
+ padding: 15,
|
|
|
+ font: {
|
|
|
+ size: 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ enabled: true,
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
|
+ titleFont: {
|
|
|
+ size: 14
|
|
|
+ },
|
|
|
+ bodyFont: {
|
|
|
+ size: 13
|
|
|
+ },
|
|
|
+ padding: 10,
|
|
|
+ displayColors: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animation: {
|
|
|
+ duration: settings.animateChart ? 1000 : 0,
|
|
|
+ easing: 'easeOutQuart'
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 检查是否为简单数据模式（只有一个数据集）
|
|
|
+ const isSimpleData = settings.isSimpleData ||
|
|
|
+ (window.chartData && window.chartData.datasets && window.chartData.datasets.length === 1);
|
|
|
+
|
|
|
+ // 如果是简单数据模式，隐藏图例
|
|
|
+ if (isSimpleData) {
|
|
|
+ options.plugins.legend.display = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 只有部分图表类型需要轴线配置
|
|
|
+ if (!['pie', 'doughnut', 'polarArea'].includes(settings.type.replace(" (首系列)", ""))) { // 兼容(首系列)后缀
|
|
|
+ options.scales = {
|
|
|
+ x: {
|
|
|
+ title: {
|
|
|
+ display: !!settings.xAxisLabel,
|
|
|
+ text: settings.xAxisLabel,
|
|
|
+ font: {
|
|
|
+ size: 14,
|
|
|
+ weight: 'bold'
|
|
|
+ },
|
|
|
+ padding: {
|
|
|
+ top: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ display: settings.showGridLines,
|
|
|
+ color: 'rgba(0, 0, 0, 0.1)'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ font: {
|
|
|
+ size: 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ y: {
|
|
|
+ title: {
|
|
|
+ display: !!settings.yAxisLabel,
|
|
|
+ text: settings.yAxisLabel,
|
|
|
+ font: {
|
|
|
+ size: 14,
|
|
|
+ weight: 'bold'
|
|
|
+ },
|
|
|
+ padding: {
|
|
|
+ bottom: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ display: settings.showGridLines,
|
|
|
+ color: 'rgba(0, 0, 0, 0.1)'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ font: {
|
|
|
+ size: 12
|
|
|
+ },
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 水平柱状图X和Y轴配置需要互换
|
|
|
+ if (settings.type === 'horizontalBar') {
|
|
|
+ const temp = options.scales.x;
|
|
|
+ options.scales.x = options.scales.y;
|
|
|
+ options.scales.y = temp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数据标签配置
|
|
|
+ if (settings.showDataLabels) {
|
|
|
+ options.plugins.datalabels = {
|
|
|
+ display: true,
|
|
|
+ color: function(context) {
|
|
|
+ const actualType = settings.type.replace(" (首系列)", "");
|
|
|
+ const dataset = context.dataset;
|
|
|
+
|
|
|
+ // 首先检查数据集是否有自定义的datalabels配置
|
|
|
+ if (dataset.datalabels && dataset.datalabels.color) {
|
|
|
+ const labelColors = dataset.datalabels.color;
|
|
|
+
|
|
|
+ // 如果color是数组，则使用对应索引的颜色
|
|
|
+ if (Array.isArray(labelColors)) {
|
|
|
+ return labelColors[context.dataIndex] || '#333333';
|
|
|
+ }
|
|
|
+ // 如果color是单个颜色值
|
|
|
+ return labelColors;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有自定义配置，则使用智能检测
|
|
|
+ // 为饼图和环形图使用对比色
|
|
|
+ if (['pie', 'doughnut', 'polarArea'].includes(actualType)) {
|
|
|
+ // 获取背景色
|
|
|
+ const index = context.dataIndex;
|
|
|
+ const backgroundColor = dataset.backgroundColor[index];
|
|
|
+
|
|
|
+ // 计算背景色的亮度
|
|
|
+ return isColorDark(backgroundColor) ? '#ffffff' : '#000000';
|
|
|
+ } else if (actualType === 'bar' || actualType === 'horizontalBar' ||
|
|
|
+ actualType === 'stackedBar' || actualType === 'gradientBar') {
|
|
|
+ // 柱状图系列也需要对比色
|
|
|
+ let backgroundColor;
|
|
|
+
|
|
|
+ // 背景色可能是数组或单个颜色
|
|
|
+ if (Array.isArray(dataset.backgroundColor)) {
|
|
|
+ backgroundColor = dataset.backgroundColor[context.dataIndex];
|
|
|
+ } else {
|
|
|
+ backgroundColor = dataset.backgroundColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ return isColorDark(backgroundColor) ? '#ffffff' : '#333333';
|
|
|
+ } else {
|
|
|
+ // 其他图表类型使用默认深色
|
|
|
+ return '#333333';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ align: function(context) {
|
|
|
+ const dataset = context.dataset;
|
|
|
+ // 使用数据集中的align配置（如果有的话）
|
|
|
+ if (dataset.datalabels && dataset.datalabels.align) {
|
|
|
+ return dataset.datalabels.align;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 默认配置
|
|
|
+ const chartType = settings.type.replace(" (首系列)", "");
|
|
|
+ if (['line', 'area', 'scatter', 'bubble'].includes(chartType)) {
|
|
|
+ return 'top';
|
|
|
+ }
|
|
|
+ return 'center';
|
|
|
+ },
|
|
|
+ font: {
|
|
|
+ weight: 'bold'
|
|
|
+ },
|
|
|
+ formatter: function(value, context) {
|
|
|
+ const actualType = settings.type.replace(" (首系列)", "");
|
|
|
+
|
|
|
+ // 饼图、环形图和极地面积图显示百分比
|
|
|
+ if (['pie', 'doughnut', 'polarArea'].includes(actualType)) {
|
|
|
+ // 计算百分比
|
|
|
+ const dataset = context.chart.data.datasets[context.datasetIndex];
|
|
|
+ const total = dataset.data.reduce((total, value) => total + value, 0);
|
|
|
+ const percentage = ((value / total) * 100).toFixed(1) + '%';
|
|
|
+
|
|
|
+ // 对于较小的扇区只显示百分比，否则显示值和百分比
|
|
|
+ const percent = value / total * 100;
|
|
|
+ if (percent < 5) {
|
|
|
+ return percentage;
|
|
|
+ } else {
|
|
|
+ return `${value} (${percentage})`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 对散点图特殊处理
|
|
|
+ if (settings.type === 'scatter') {
|
|
|
+ if (context && context.dataset && context.dataset.data &&
|
|
|
+ context.dataset.data[context.dataIndex] &&
|
|
|
+ typeof context.dataset.data[context.dataIndex].y !== 'undefined') {
|
|
|
+ return context.dataset.data[context.dataIndex].y;
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return options;
|
|
|
+}
|
|
|
+
|
|
|
+// 判断颜色是否为深色
|
|
|
+function isColorDark(color) {
|
|
|
+ // 处理rgba格式
|
|
|
+ if (color && color.startsWith('rgba')) {
|
|
|
+ const parts = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
|
|
|
+ if (parts) {
|
|
|
+ const r = parseInt(parts[1]);
|
|
|
+ const g = parseInt(parts[2]);
|
|
|
+ const b = parseInt(parts[3]);
|
|
|
+ // 计算亮度 (根据人眼对RGB的敏感度加权)
|
|
|
+ const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
|
+ return brightness < 0.7; // 亮度小于0.7认为是深色
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理rgb格式
|
|
|
+ if (color && color.startsWith('rgb(')) {
|
|
|
+ const parts = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
|
+ if (parts) {
|
|
|
+ const r = parseInt(parts[1]);
|
|
|
+ const g = parseInt(parts[2]);
|
|
|
+ const b = parseInt(parts[3]);
|
|
|
+ const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
|
+ return brightness < 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理十六进制格式
|
|
|
+ if (color && color.startsWith('#')) {
|
|
|
+ color = color.replace('#', '');
|
|
|
+ const r = parseInt(color.length === 3 ? color.substring(0, 1).repeat(2) : color.substring(0, 2), 16);
|
|
|
+ const g = parseInt(color.length === 3 ? color.substring(1, 2).repeat(2) : color.substring(2, 4), 16);
|
|
|
+ const b = parseInt(color.length === 3 ? color.substring(2, 3).repeat(2) : color.substring(4, 6), 16);
|
|
|
+ const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
|
+ return brightness < 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 默认返回true，使用白色文本
|
|
|
+ return true;
|
|
|
+}
|
|
|
+
|
|
|
+// 应用颜色方案
|
|
|
+function applyColorScheme(data, colorScheme, chartType) {
|
|
|
+ // 定义颜色方案 - 全新设计，确保各个方案风格迥异
|
|
|
+ const colorSchemes = {
|
|
|
+ default: [
|
|
|
+ '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b',
|
|
|
+ '#6f42c1', '#fd7e14', '#20c9a6', '#36b9cc', '#858796'
|
|
|
+ ],
|
|
|
+ pastel: [
|
|
|
+ '#FFB6C1', '#FFD700', '#98FB98', '#87CEFA', '#FFA07A',
|
|
|
+ '#DDA0DD', '#FFDAB9', '#B0E0E6', '#F0E68C', '#E6E6FA'
|
|
|
+ ],
|
|
|
+ bright: [
|
|
|
+ '#FF1E1E', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF',
|
|
|
+ '#FF00FF', '#FF7F00', '#FF1493', '#00FA9A', '#7B68EE'
|
|
|
+ ],
|
|
|
+ cool: [
|
|
|
+ '#5F4B8B', '#42BFDD', '#00A7E1', '#00344B', '#143642',
|
|
|
+ '#0F8B8D', '#4CB5F5', '#1D3557', '#A8DADC', '#457B9D'
|
|
|
+ ],
|
|
|
+ warm: [
|
|
|
+ '#FF7700', '#FF9E00', '#FFCF00', '#FFF400', '#E20000',
|
|
|
+ '#D91A1A', '#A60000', '#FF5252', '#FF7B7B', '#FFBF69'
|
|
|
+ ],
|
|
|
+ corporate: [
|
|
|
+ '#003F5C', '#2F4B7C', '#665191', '#A05195', '#D45087',
|
|
|
+ '#F95D6A', '#FF7C43', '#FFA600', '#004D40', '#00695C'
|
|
|
+ ],
|
|
|
+ contrast: [
|
|
|
+ '#000000', '#E63946', '#457B9D', '#F1C40F', '#2ECC71',
|
|
|
+ '#9B59B6', '#1ABC9C', '#F39C12', '#D35400', '#7F8C8D'
|
|
|
+ ],
|
|
|
+ rainbow: [
|
|
|
+ '#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF',
|
|
|
+ '#4B0082', '#9400D3', '#FF1493', '#00FFFF', '#FF00FF'
|
|
|
+ ],
|
|
|
+ earth: [
|
|
|
+ '#5D4037', '#795548', '#A1887F', '#4E342E', '#3E2723',
|
|
|
+ '#33691E', '#558B2F', '#7CB342', '#8D6E63', '#6D4C41'
|
|
|
+ ],
|
|
|
+ ocean: [
|
|
|
+ '#006064', '#00838F', '#0097A7', '#00ACC1', '#00BCD4',
|
|
|
+ '#26C6DA', '#4DD0E1', '#80DEEA', '#01579B', '#0277BD'
|
|
|
+ ],
|
|
|
+ vintage: [
|
|
|
+ '#8D8741', '#659DBD', '#DAAD86', '#BC986A', '#FBEEC1',
|
|
|
+ '#605B56', '#837A75', '#9E8B8B', '#D8C3A5', '#E8DDCD'
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取选定的颜色方案
|
|
|
+ const colors = colorSchemes[colorScheme] || colorSchemes.default;
|
|
|
+
|
|
|
+ const actualChartType = chartType.replace(" (首系列)", ""); // 获取基础类型
|
|
|
+
|
|
|
+ // 为每个数据集应用颜色
|
|
|
+ data.datasets.forEach((dataset, index) => {
|
|
|
+ const color = colors[index % colors.length];
|
|
|
+
|
|
|
+ // 设置不同图表类型的颜色
|
|
|
+ if (['pie', 'doughnut', 'polarArea', 'halfPie', 'nestedPie', 'gauge'].includes(actualChartType)) {
|
|
|
+ // 这些图表类型需要为每个数据点设置不同颜色
|
|
|
+ // 对于gauge特殊处理，不使用这种方式
|
|
|
+ if (actualChartType === 'gauge' && dataset.backgroundColor) {
|
|
|
+ // 保留gauge的特殊颜色设置
|
|
|
+ } else {
|
|
|
+ dataset.backgroundColor = dataset.data.map((_, i) => colors[i % colors.length]);
|
|
|
+ dataset.borderColor = 'white';
|
|
|
+ dataset.borderWidth = 1;
|
|
|
+
|
|
|
+ // 为每个扇区添加对应的前景色（用于数据标签）
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: dataset.backgroundColor.map(bgColor => isColorDark(bgColor) ? '#ffffff' : '#000000')
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else if (['line', 'area', 'stackedArea', 'curvedLine', 'stepLine', 'timeline', 'streamgraph'].includes(actualChartType)) {
|
|
|
+ // 折线图和面积图样式
|
|
|
+ dataset.borderColor = color;
|
|
|
+ // 根据图表类型调整透明度
|
|
|
+ let alpha = 0.1; // 默认折线图半透明
|
|
|
+ if (['area', 'stackedArea', 'streamgraph'].includes(actualChartType)) {
|
|
|
+ alpha = 0.3; // 面积图相对更不透明
|
|
|
+ }
|
|
|
+ dataset.backgroundColor = hexToRgba(color, alpha);
|
|
|
+ dataset.pointBackgroundColor = color;
|
|
|
+ dataset.pointBorderColor = '#fff';
|
|
|
+ dataset.pointHoverBackgroundColor = '#fff';
|
|
|
+ dataset.pointHoverBorderColor = color;
|
|
|
+
|
|
|
+ // 特殊线型
|
|
|
+ if (actualChartType === 'curvedLine') {
|
|
|
+ dataset.tension = 0.4;
|
|
|
+ } else if (actualChartType === 'stepLine') {
|
|
|
+ dataset.stepped = true;
|
|
|
+ } else if (actualChartType === 'timeline') {
|
|
|
+ dataset.stepped = 'before';
|
|
|
+ dataset.borderDash = [5, 5];
|
|
|
+ } else {
|
|
|
+ dataset.tension = 0.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置数据标签颜色
|
|
|
+ // 对于线图和面积图，标签通常放在点的上方，使用与线条相同的颜色
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: isColorDark(color) ? color : '#333333',
|
|
|
+ align: 'top'
|
|
|
+ };
|
|
|
+ } else if (actualChartType === 'radar') {
|
|
|
+ // 雷达图样式
|
|
|
+ dataset.borderColor = color;
|
|
|
+ dataset.backgroundColor = hexToRgba(color, 0.2);
|
|
|
+ dataset.pointBackgroundColor = color;
|
|
|
+ dataset.pointBorderColor = '#fff';
|
|
|
+
|
|
|
+ // 雷达图数据标签颜色 - 使用与边框相同的颜色
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: isColorDark(color) ? color : '#333333'
|
|
|
+ };
|
|
|
+ } else if (['scatter', 'bubble', 'scatterSmooth'].includes(actualChartType)) {
|
|
|
+ // 散点图样式
|
|
|
+ dataset.backgroundColor = color;
|
|
|
+ dataset.borderColor = hexToRgba(color, 0.8);
|
|
|
+
|
|
|
+ // 散点平滑图特殊处理
|
|
|
+ if (actualChartType === 'scatterSmooth' && dataset.type === 'line') {
|
|
|
+ dataset.borderColor = color;
|
|
|
+ dataset.backgroundColor = 'transparent';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 散点图数据标签颜色
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: isColorDark(color) ? '#ffffff' : '#333333',
|
|
|
+ align: 'top'
|
|
|
+ };
|
|
|
+ } else if (actualChartType === 'gradientBar') {
|
|
|
+ // 渐变柱状图
|
|
|
+ const ctx = document.createElement('canvas').getContext('2d');
|
|
|
+ const gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
|
+ gradient.addColorStop(0, color);
|
|
|
+ gradient.addColorStop(1, hexToRgba(color, 0.3));
|
|
|
+ dataset.backgroundColor = gradient;
|
|
|
+ dataset.borderColor = color;
|
|
|
+ dataset.borderWidth = 1;
|
|
|
+ dataset.hoverBackgroundColor = color;
|
|
|
+
|
|
|
+ // 渐变柱状图标签颜色 - 使用顶部颜色判断
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: isColorDark(color) ? '#ffffff' : '#333333'
|
|
|
+ };
|
|
|
+ } else if (actualChartType === 'waterfall') {
|
|
|
+ // 瀑布图特殊处理
|
|
|
+ if (dataset.label === '起点') {
|
|
|
+ // 这是为瀑布图添加的起点数据集，保持透明
|
|
|
+ } else {
|
|
|
+ const values = dataset.data;
|
|
|
+ // 根据值的正负设置不同颜色
|
|
|
+ const positiveColor = '#36b9cc';
|
|
|
+ const negativeColor = '#e74a3b';
|
|
|
+
|
|
|
+ dataset.backgroundColor = values.map(value =>
|
|
|
+ value >= 0 ? hexToRgba(positiveColor, 0.7) : hexToRgba(negativeColor, 0.7)
|
|
|
+ );
|
|
|
+ dataset.borderColor = values.map(value =>
|
|
|
+ value >= 0 ? positiveColor : negativeColor
|
|
|
+ );
|
|
|
+ dataset.borderWidth = 1;
|
|
|
+
|
|
|
+ // 瀑布图数据标签颜色 - 根据每个柱子的背景色决定
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: values.map(value =>
|
|
|
+ value >= 0 ? (isColorDark(positiveColor) ? '#ffffff' : '#333333') :
|
|
|
+ (isColorDark(negativeColor) ? '#ffffff' : '#333333')
|
|
|
+ )
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else if (actualChartType === 'funnel') {
|
|
|
+ // 漏斗图特殊处理 - 使用渐变颜色
|
|
|
+ const data = dataset.data;
|
|
|
+ if (data.length) {
|
|
|
+ dataset.backgroundColor = data.map((_, i) => {
|
|
|
+ const ratio = 1 - (i / data.length); // 1 到 0
|
|
|
+ return hexToRgba(color, 0.5 + ratio * 0.5); // 透明度从1到0.5
|
|
|
+ });
|
|
|
+ dataset.borderColor = color;
|
|
|
+ dataset.borderWidth = 1;
|
|
|
+
|
|
|
+ // 漏斗图数据标签颜色 - 根据每个部分的背景色决定
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: dataset.backgroundColor.map(bgColor => isColorDark(bgColor) ? '#ffffff' : '#333333')
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 默认样式（用于柱状图等）
|
|
|
+ dataset.backgroundColor = hexToRgba(color, 0.7);
|
|
|
+ dataset.borderColor = color;
|
|
|
+ dataset.borderWidth = 1;
|
|
|
+ dataset.hoverBackgroundColor = color;
|
|
|
+
|
|
|
+ // 默认数据标签颜色 - 根据背景色决定
|
|
|
+ dataset.datalabels = {
|
|
|
+ color: isColorDark(dataset.backgroundColor) ? '#ffffff' : '#333333'
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 将十六进制颜色转换为rgba格式
|
|
|
+function hexToRgba(hex, alpha) {
|
|
|
+ // 移除井号
|
|
|
+ hex = hex.replace('#', '');
|
|
|
+
|
|
|
+ // 解析RGB值
|
|
|
+ const r = parseInt(hex.length === 3 ? hex.substring(0, 1).repeat(2) : hex.substring(0, 2), 16);
|
|
|
+ const g = parseInt(hex.length === 3 ? hex.substring(1, 2).repeat(2) : hex.substring(2, 4), 16);
|
|
|
+ const b = parseInt(hex.length === 3 ? hex.substring(2, 3).repeat(2) : hex.substring(4, 6), 16);
|
|
|
+
|
|
|
+ // 返回rgba字符串
|
|
|
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
|
+}
|
|
|
+
|
|
|
+// 渲染热力图（自定义实现）
|
|
|
+function renderHeatmap(ctx, data, options) {
|
|
|
+ // 清除Canvas
|
|
|
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
+
|
|
|
+ // 设置尺寸和边距
|
|
|
+ const margin = {
|
|
|
+ top: 50,
|
|
|
+ right: 30,
|
|
|
+ bottom: 50,
|
|
|
+ left: 60
|
|
|
+ };
|
|
|
+
|
|
|
+ const width = ctx.canvas.width - margin.left - margin.right;
|
|
|
+ const height = ctx.canvas.height - margin.top - margin.bottom;
|
|
|
+
|
|
|
+ // 获取数据
|
|
|
+ const rows = data.labels;
|
|
|
+ const columns = data.datasets.map(dataset => dataset.label);
|
|
|
+
|
|
|
+ // 创建值矩阵
|
|
|
+ const matrix = [];
|
|
|
+ rows.forEach((_, rowIndex) => {
|
|
|
+ const row = [];
|
|
|
+ data.datasets.forEach(dataset => {
|
|
|
+ row.push(dataset.data[rowIndex]);
|
|
|
+ });
|
|
|
+ matrix.push(row);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 找出最大值和最小值
|
|
|
+ const allValues = matrix.flat();
|
|
|
+ const min = Math.min(...allValues);
|
|
|
+ const max = Math.max(...allValues);
|
|
|
+
|
|
|
+ // 绘制标题
|
|
|
+ if (options.plugins && options.plugins.title && options.plugins.title.display) {
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.font = '18px Arial';
|
|
|
+ ctx.fillStyle = '#333';
|
|
|
+ ctx.fillText(options.plugins.title.text, ctx.canvas.width / 2, 25);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 绘制单元格和标签
|
|
|
+ const cellWidth = width / columns.length;
|
|
|
+ const cellHeight = height / rows.length;
|
|
|
+
|
|
|
+ // 行标签（Y轴）
|
|
|
+ ctx.textAlign = 'right';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.font = '12px Arial';
|
|
|
+ ctx.fillStyle = '#666';
|
|
|
+
|
|
|
+ rows.forEach((label, i) => {
|
|
|
+ const y = margin.top + i * cellHeight + cellHeight / 2;
|
|
|
+ ctx.fillText(label, margin.left - 10, y);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 列标签（X轴）
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'top';
|
|
|
+
|
|
|
+ columns.forEach((label, i) => {
|
|
|
+ const x = margin.left + i * cellWidth + cellWidth / 2;
|
|
|
+ ctx.fillText(label, x, margin.top + height + 10);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绘制热力图单元格
|
|
|
+ matrix.forEach((row, i) => {
|
|
|
+ row.forEach((value, j) => {
|
|
|
+ // 归一化值 (0-1)
|
|
|
+ const normalizedValue = (value - min) / (max - min || 1);
|
|
|
+
|
|
|
+ // 计算颜色（红-黄-绿渐变）
|
|
|
+ const color = getHeatmapColor(normalizedValue);
|
|
|
+
|
|
|
+ // 绘制单元格
|
|
|
+ const x = margin.left + j * cellWidth;
|
|
|
+ const y = margin.top + i * cellHeight;
|
|
|
+
|
|
|
+ ctx.fillStyle = color;
|
|
|
+ ctx.fillRect(x, y, cellWidth, cellHeight);
|
|
|
+
|
|
|
+ // 添加值标签，根据背景色的亮度自动选择标签颜色
|
|
|
+ const brightness = getColorBrightness(color);
|
|
|
+ ctx.fillStyle = brightness < 0.7 ? 'white' : 'black'; // 亮度阈值为0.7
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.font = 'bold 12px Arial';
|
|
|
+ ctx.fillText(value, x + cellWidth / 2, y + cellHeight / 2);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绘制坐标轴
|
|
|
+ ctx.strokeStyle = '#ddd';
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+
|
|
|
+ // X轴
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(margin.left, margin.top + height);
|
|
|
+ ctx.lineTo(margin.left + width, margin.top + height);
|
|
|
+ ctx.stroke();
|
|
|
+
|
|
|
+ // Y轴
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(margin.left, margin.top);
|
|
|
+ ctx.lineTo(margin.left, margin.top + height);
|
|
|
+ ctx.stroke();
|
|
|
+}
|
|
|
+
|
|
|
+// 获取颜色亮度
|
|
|
+function getColorBrightness(color) {
|
|
|
+ // 处理rgb格式
|
|
|
+ if (color.startsWith('rgb(')) {
|
|
|
+ const parts = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
|
+ if (parts) {
|
|
|
+ const r = parseInt(parts[1]);
|
|
|
+ const g = parseInt(parts[2]);
|
|
|
+ const b = parseInt(parts[3]);
|
|
|
+ // 计算亮度 (根据人眼对RGB的敏感度加权)
|
|
|
+ return (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 默认返回0.5
|
|
|
+ return 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+// 获取热力图颜色
|
|
|
+function getHeatmapColor(value) {
|
|
|
+ // 红-黄-绿渐变
|
|
|
+ const r = value < 0.5 ? 255 : Math.round(255 * (1 - 2 * (value - 0.5)));
|
|
|
+ const g = value < 0.5 ? Math.round(255 * (2 * value)) : 255;
|
|
|
+ const b = 0;
|
|
|
+
|
|
|
+ return `rgb(${r}, ${g}, ${b})`;
|
|
|
+}
|
|
|
+
|
|
|
+// 注册Chart.js插件以支持数据标签
|
|
|
+Chart.register({
|
|
|
+ id: 'datalabels',
|
|
|
+ beforeDraw: (chart) => {
|
|
|
+ const ctx = chart.ctx;
|
|
|
+ const options = chart.options.plugins.datalabels;
|
|
|
+
|
|
|
+ if (!options || !options.display) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ chart.data.datasets.forEach((dataset, datasetIndex) => {
|
|
|
+ const meta = chart.getDatasetMeta(datasetIndex);
|
|
|
+
|
|
|
+ meta.data.forEach((element, index) => {
|
|
|
+ // 获取值
|
|
|
+ let value = dataset.data[index];
|
|
|
+ if (typeof value === 'object' && value !== null) {
|
|
|
+ // 散点图等复杂数据结构
|
|
|
+ value = value.y;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取位置
|
|
|
+ const { x, y } = element.getCenterPoint();
|
|
|
+
|
|
|
+ // 确定文本颜色
|
|
|
+ let fillColor;
|
|
|
+ if (typeof options.color === 'function') {
|
|
|
+ fillColor = options.color({
|
|
|
+ datasetIndex,
|
|
|
+ index,
|
|
|
+ dataset,
|
|
|
+ dataIndex: index,
|
|
|
+ chart: chart
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ fillColor = options.color || '#666';
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.fillStyle = fillColor;
|
|
|
+
|
|
|
+ // 设置字体
|
|
|
+ ctx.font = options.font.weight + ' 12px Arial';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+
|
|
|
+ // 格式化值
|
|
|
+ let text = typeof options.formatter === 'function'
|
|
|
+ ? options.formatter(value, {
|
|
|
+ datasetIndex,
|
|
|
+ index,
|
|
|
+ dataset,
|
|
|
+ dataIndex: index,
|
|
|
+ chart: chart
|
|
|
+ })
|
|
|
+ : value;
|
|
|
+
|
|
|
+ // 绘制文本
|
|
|
+ ctx.fillText(text, x, y - 15);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 辅助函数：转换散点图数据
|
|
|
+function transformScatterData(datasets) {
|
|
|
+ return datasets.map(dataset => {
|
|
|
+ if (!dataset.data || !Array.isArray(dataset.data)) {
|
|
|
+ return {
|
|
|
+ ...dataset,
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...dataset,
|
|
|
+ data: dataset.data.map((value, index) => {
|
|
|
+ // 确保value是一个有效的数值
|
|
|
+ const y = parseFloat(value);
|
|
|
+ if (isNaN(y)) {
|
|
|
+ return { x: index + 1, y: 0 };
|
|
|
+ }
|
|
|
+ return { x: index + 1, y: y };
|
|
|
+ })
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 辅助函数：转换气泡图数据
|
|
|
+function transformBubbleData(datasets) {
|
|
|
+ return datasets.map(dataset => {
|
|
|
+ if (!dataset.data || !Array.isArray(dataset.data)) {
|
|
|
+ return {
|
|
|
+ ...dataset,
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...dataset,
|
|
|
+ data: dataset.data.map((value, index) => {
|
|
|
+ // 确保value是一个有效的数值
|
|
|
+ const y = parseFloat(value);
|
|
|
+ if (isNaN(y)) {
|
|
|
+ return { x: index + 1, y: 0, r: 5 };
|
|
|
+ }
|
|
|
+ // 气泡大小与值成比例
|
|
|
+ const r = Math.max(5, Math.min(20, y / 10));
|
|
|
+ return { x: index + 1, y: y, r: r };
|
|
|
+ })
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 初始化图表类型预览画廊
|
|
|
+ */
|
|
|
+function initChartTypeGallery() {
|
|
|
+ // 获取所有图表类型预览项
|
|
|
+ const chartTypeItems = document.querySelectorAll('.chart-type-item');
|
|
|
+
|
|
|
+ // 获取图表类型选择下拉框
|
|
|
+ const chartTypeSelect = document.getElementById('chart-type');
|
|
|
+
|
|
|
+ // 为每个预览项添加点击事件
|
|
|
+ chartTypeItems.forEach(item => {
|
|
|
+ item.addEventListener('click', function() {
|
|
|
+ // 获取图表类型值
|
|
|
+ const chartType = this.getAttribute('data-chart-type');
|
|
|
+
|
|
|
+ // 设置下拉框的值
|
|
|
+ chartTypeSelect.value = chartType;
|
|
|
+
|
|
|
+ // 触发change事件以更新图表
|
|
|
+ const event = new Event('change');
|
|
|
+ chartTypeSelect.dispatchEvent(event);
|
|
|
+
|
|
|
+ // 更新活动状态
|
|
|
+ chartTypeItems.forEach(item => item.classList.remove('active'));
|
|
|
+ this.classList.add('active');
|
|
|
+
|
|
|
+ // 如果已经有图表实例，立即生成图表
|
|
|
+ if (window.chartInstance) {
|
|
|
+ // 假设generateChart是全局函数
|
|
|
+ if (typeof window.generateChart === 'function') {
|
|
|
+ window.generateChart();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 初始化时设置当前选中的图表类型为活动状态
|
|
|
+ const currentChartType = chartTypeSelect.value;
|
|
|
+ const activeItem = document.querySelector(`.chart-type-item[data-chart-type="${currentChartType}"]`);
|
|
|
+ if (activeItem) {
|
|
|
+ activeItem.classList.add('active');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当下拉框选择变化时，同步更新活动预览项
|
|
|
+ chartTypeSelect.addEventListener('change', function() {
|
|
|
+ const selectedType = this.value;
|
|
|
+ chartTypeItems.forEach(item => {
|
|
|
+ if (item.getAttribute('data-chart-type') === selectedType) {
|
|
|
+ item.classList.add('active');
|
|
|
+ } else {
|
|
|
+ item.classList.remove('active');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
zxlie
