Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type3_vertical_group_bar_chart/vertical_group_bar_plain_chart_01.js

@@ -0,0 +1,370 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 6], [0, 100], [3, 4]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+    
+    // 提取数据和配置
+    const jsonData = data;                       // 完整的JSON数据对象
+    const chartData = jsonData.data.data;        // 实际数据点数组  
+    const variables = jsonData.variables || {};  // 图表配置
+    const typography = jsonData.typography || {  // 字体设置，如果不存在则使用默认值
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || { 
+        text_color: "#333333",
+        other: { 
+            primary: "#D32F2F",    // Red for "Still active"
+            secondary: "#AAAAAA",  // Gray for "Ended"
+            background: "#F0F0F0" 
+        }
+    };  // 颜色设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_stroke = variables.has_stroke || false;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 数值单位规范
+    // 添加数值格式化函数
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 600;
+    const height = variables.height || 400;
+    
+    // 设置边距
+    const margin = {
+        top: 50,
+        right: 30,
+        bottom: 80,
+        left: 40
+    };
+    
+    // 计算实际绘图区域大小
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列获取字段名
+    const xField = chartUtils.schema.channel(jsonData, "x").key || "period";
+    const yField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    const groupField = chartUtils.schema.channel(jsonData, "group").key || "group";
+    
+    // 获取字段单位（如果存在）
+    let xUnit = "";
+    let yUnit = "";
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        xUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        yUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit;
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取所有唯一的分组值
+    const groups = Array.from(new Set(chartData.map(d => d[groupField])));
+    
+    // 处理数据，按照分组组织
+    const processedData = chartData.reduce((acc, d) => {
+        const category = d[xField];
+        const group = d[groupField];
+        const value = +d[yField];
+        
+        const existingCategory = acc.find(item => item.category === category);
+        if (existingCategory) {
+            existingCategory.groups[group] = value;
+        } else {
+            const newCategory = {
+                category: category,
+                groups: {}
+            };
+            newCategory.groups[group] = value;
+            acc.push(newCategory);
+        }
+        return acc;
+    }, []);
+
+    // ---------- 5. 创建比例尺 ----------
+    
+    // X轴比例尺 - 使用分类数据
+    const xScale = d3.scaleBand()
+        .domain(processedData.map(d => d.category))
+        .range([0, chartWidth])
+        .padding(0.2);
+
+    // 分组比例尺
+    const groupScale = d3.scaleBand()
+        .domain(groups)
+        .range([0, xScale.bandwidth()])
+        .padding(0.05);
+
+    // Y轴比例尺 - 使用数值
+    const yScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[yField]) || 1]) // Ensure domain is not [0,0]
+        .range([chartHeight, 0])
+        .nice();
+    // +++ 辅助函数区 +++
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function measureTextWidth(text, fontFamily, fontSize, fontWeight) {
+        ctx.font = `${fontWeight || 'normal'} ${fontSize}px ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(ctx, text);
+    }
+
+    const calculateFontSize = (text, maxWidth, baseSize = 14) => {
+        if (!text || typeof text !== 'string' || !maxWidth || maxWidth <= 0 || !baseSize || baseSize <= 0) {
+            return Math.max(10, baseSize || 14);
+        }
+        const avgCharWidth = baseSize * 0.6;
+        const textWidth = text.length * avgCharWidth;
+        if (textWidth < maxWidth) {
+            return baseSize;
+        }
+        return Math.max(10, Math.floor(baseSize * (maxWidth / textWidth)));
+    };
+
+    function wrapText(textElement, str, width, lineHeight = 1.1, alignment = 'middle') {
+        const words = str.split(/\s+/).reverse(); 
+        let word;
+        let line = [];
+        let lineNumber = 0;
+        const initialY = parseFloat(textElement.attr("data-initial-y")); // 从data属性获取初始Y
+        // const initialX = parseFloat(textElement.attr("x")); // 这一行应该被注释掉或移除
+
+        textElement.text(null); 
+        let tspans = []; 
+
+        if (words.length > 1) {
+            let currentLine = [];
+            while (word = words.pop()) {
+                currentLine.push(word);
+                const isOverflow = chartUtils.text.measure(null, currentLine.join(" "), {
+                    fontFamily: textElement.style("font-family"),
+                    fontSize: parseFloat(textElement.style("font-size")),
+                    fontWeight: textElement.style("font-weight")
+                }).width > width;
+                if (isOverflow && currentLine.length > 1) {
+                    currentLine.pop(); 
+                    tspans.push(currentLine.join(" ")); 
+                    currentLine = [word]; 
+                    lineNumber++;
+                }
+            }
+            if (currentLine.length > 0) {
+                tspans.push(currentLine.join(" "));
+            }
+        } else { 
+            const chars = str.split('');
+            let currentLine = '';
+            for (let i = 0; i < chars.length; i++) {
+                const nextLine = currentLine + chars[i];
+                const isOverflow = chartUtils.text.measure(null, nextLine, {
+                    fontFamily: textElement.style("font-family"),
+                    fontSize: parseFloat(textElement.style("font-size")),
+                    fontWeight: textElement.style("font-weight")
+                }).width > width;
+                if (isOverflow && currentLine.length > 0) { 
+                    tspans.push(currentLine); 
+                    currentLine = chars[i]; 
+                    lineNumber++;
+                } else {
+                    currentLine = nextLine; 
+                }
+            }
+            if (currentLine.length > 0) {
+                tspans.push(currentLine);
+            }
+        }
+
+        const totalLines = tspans.length;
+        let startDy = 0;
+        textElement.attr("y", initialY); // 重置Y到初始值
+        
+        if (alignment === 'middle') {
+            startDy = -( (totalLines - 1) * lineHeight / 2);
+        } else if (alignment === 'bottom') {
+            const totalHeightEm = totalLines * lineHeight;
+            startDy = -(totalHeightEm - lineHeight); 
+        }
+
+        tspans.forEach((lineText, i) => {
+            textElement.append("tspan")
+                // .attr("x", initialX) // 关键：确保这一行被注释掉或移除
+                .attr("dy", (i === 0 ? startDy : lineHeight) + "em") 
+                .text(lineText);
+        });
+        textElement.attr("data-lines", totalLines);
+    }
+    // +++ 辅助函数区结束 +++
+
+    // ---------- 6. 创建SVG容器 ----------
+    
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 添加图表主体容器
+    const chartGroup = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // ---------- 7. 绘制图表元素 ----------
+    
+    // 添加X轴
+    const xCategories = processedData.map(d => d.category);
+    const baseLabelFontSize = parseFloat(typography.label.font_size) || 14;
+    const xLabelMaxWidth = xScale.bandwidth() * 0.95; 
+    const longestXLabel = xCategories.reduce((a, b) => String(a).length > String(b).length ? a : b, "").toString();
+    const uniformXLabelFontSize = calculateFontSize(longestXLabel, xLabelMaxWidth, baseLabelFontSize);
+
+    // +++ Pre-calculate for Value Labels +++
+    let longestValueLabelStr = "";
+    processedData.forEach(pd => {
+        groups.forEach(group => {
+            const value = pd.groups[group] || 0;
+            const labelStr = chartUtils.format.autoText(value) + (yUnit ? ` ${yUnit}` : '');
+            if (labelStr.length > longestValueLabelStr.length) {
+                longestValueLabelStr = labelStr;
+            }
+        });
+    });
+    const baseValueLabelFontSize = parseFloat(typography.annotation.font_size) || 12; // Use annotation font size as base
+    const valueLabelMaxWidth = groupScale.bandwidth();
+    const uniformValueLabelFontSize = calculateFontSize(longestValueLabelStr, valueLabelMaxWidth, baseValueLabelFontSize);
+    // +++ End Pre-calculate for Value Labels +++
+
+    const xAxis = d3.axisBottom(xScale)
+        .tickSize(0) // 移除刻度线
+        .tickPadding(10); // 增加标签和轴线的间距
+    
+    chartGroup.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${chartHeight})`)
+        .call(xAxis)
+        .selectAll(".tick text") // 选择刻度文本
+        .attr("data-initial-y", typography.label.font_size) 
+        .style("font-family", typography.label.font_family)
+        .style("font-size", `${uniformXLabelFontSize}px`)
+        .style("text-anchor", "middle")
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .each(function(d) {
+            const textElement = d3.select(this);
+            wrapText(textElement, String(d), xLabelMaxWidth, 1.1, 'top');
+        });
+    
+    // 添加Y轴
+    const yAxis = d3.axisLeft(yScale)
+        .ticks(5)
+        .tickFormat(d => chartUtils.format.autoText(d) + (yUnit ? ` ${yUnit}` : ''))
+        .tickSize(0)          // 移除刻度线
+        .tickPadding(10);     // 增加文字和轴的间距
+    
+    chartGroup.append("g")
+        .attr("class", "y-axis")
+        .call(yAxis)
+        .call(g => g.select(".domain").remove())  // 移除轴线
+        .selectAll("text")
+        .remove()
+        // .style("font-family", typography.label.font_family)
+        // .style("font-size", typography.label.font_size)
+        // .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+    
+    // 修改条形图绘制部分
+    const barGroups = chartGroup.selectAll(".bar-group")
+        .data(processedData)
+        .enter()
+        .append("g")
+        .attr("class", "bar-group")
+        .attr("transform", d => `translate(${xScale(d.category)},0)`);
+
+    groups.forEach(group => {
+        barGroups.append("rect")
+            .attr("class", "bar")
+            .attr("x", d => groupScale(group))
+            .attr("y", d => yScale(d.groups[group] || 0))
+            .attr("width", groupScale.bandwidth())
+            .attr("height", d => chartHeight - yScale(d.groups[group] || 0))
+            .attr("fill", colorResolver.field(group, 0, { fallbackKey: "primary" }).value);
+
+        // 添加数值标签
+        barGroups.append("text")
+            .attr("class", "label")
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.annotation.font_family)
+            .style("font-size", `${uniformValueLabelFontSize}px`)
+            .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .attr("data-initial-y", d => yScale(d.groups[group] || 0)-5)
+            .each(function(d_barGroup) {
+                const textElement = d3.select(this);
+                const value = d_barGroup.groups[group] || 0;
+                const labelText = chartUtils.format.autoText(value) + (yUnit ? ` ${yUnit}` : '');
+                textElement.attr("x", groupScale(group) + groupScale.bandwidth() / 2);
+                wrapText(textElement, labelText, valueLabelMaxWidth, 1.1, 'bottom');
+            });
+    });
+    // 添加图例 - 放在图表上方
+    const legendGroup = svg.append("g")
+        .attr("transform", `translate(0, -50)`);
+    
+    // 计算字段名宽度并添加间距
+    const titleWidth = groupField.length * 10;
+    const titleMargin = 15;
+
+
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: titleWidth + titleMargin,
+        y: 0,
+        fontSize: 14,
+        fontWeight: "bold",
+        align: "left",
+        maxWidth: chartWidth - titleWidth - titleMargin,
+        shape: "rect",
+    });
+
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type3_vertical_group_bar_chart/vertical_group_bar_plain_chart_02.js

@@ -0,0 +1,623 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_plain_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 垂直分组条形图实现 - 带有图标和数值标签
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备 ----------
+    // 提取数据和配置
+    const jsonData = data;
+    const chartData = jsonData.data.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#333333",
+        field: {},
+        other: {
+            primary: "#4682B4" // 默认主色调
+        }
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 如果不存在，添加副标题字段
+    typography.subtitle = typography.subtitle || typography.description;
+
+    // 设置视觉效果变量
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+    variables.has_spacing = variables.has_spacing || false;
+
+    // 清除容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+    // 设置图表尺寸和边距
+    const width = variables.width || 800;
+    const height = variables.height || 500;
+
+    // 边距：上，右，下，左
+    const margin = {
+        top: 100,    // 标题和标签的空间
+        right: 30,  // 右侧标签的空间
+        bottom: 80, // x轴和标签的空间
+        left: 30    // y轴和标签的空间
+    };
+
+    // 计算实际绘图区域大小
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 3. 提取字段名称和单位 ----------
+    let xField, yField, groupField;
+    let xUnit = "", yUnit = "";
+
+    // 安全提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+    const groupChannel = chartUtils.schema.channel(jsonData, "group");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+    groupField = groupChannel.key;
+
+    // 获取字段单位
+    xUnit = xChannel.unit;
+    yUnit = yChannel.unit;
+
+    // ---------- 4. 数据处理 ----------
+    // 使用提供的数据
+    let useData = chartData;
+
+    // 获取x轴和分组的唯一值
+    const xValues = [...new Set(useData.map(d => d[xField]))];
+    let groupValues = [...new Set(useData.map(d => d[groupField]))];
+
+    // 如果组的数量不符合要求，给出警告
+    if (groupValues.length !== 2) {
+        console.warn("此图表需要恰好2个组字段");
+    }
+
+    // 第一个组是左侧柱子，第二个组是右侧柱子
+    const leftBarGroup = groupValues[0];
+    const rightBarGroup = groupValues[1];
+
+    // ---------- 5. 创建SVG容器 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    // ---------- 6. 创建视觉效果 ----------
+    const defs = svg.append("defs");
+
+    // 如果需要，创建阴影滤镜
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 3);
+
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+
+    // *** 添加: 定义斜线纹理模式 ***
+    const patternDensity = 6; // 固定斜线密度
+    const patternStrokeWidth = 1.5; // 固定斜线宽度
+    const groups = [leftBarGroup, rightBarGroup]; // 使用之前确定的分组名称
+    const defaultColors = ["#4269d0", "#ff725c"]; // 默认颜色
+
+    groups.forEach((group, i) => {
+        // 为每个组获取颜色
+        const groupColor = colorResolver.field(group, 0, { fallback: defaultColors }).value[i % defaultColors.length]; // 使用预设的默认颜色
+
+        // 创建斜线纹理模式
+        const patternId = `pattern-${i === 0 ? 'left' : 'right'}`; // 使用 'left'/'right' 作为 ID 一部分
+        const pattern = defs.append("pattern")
+            .attr("id", patternId)
+            .attr("patternUnits", "userSpaceOnUse")
+            .attr("width", patternDensity)
+            .attr("height", patternDensity)
+            .attr("patternTransform", "rotate(45)");
+
+        // 添加背景矩形
+        pattern.append("rect")
+            .attr("width", patternDensity)
+            .attr("height", patternDensity)
+            .attr("fill", groupColor)
+            .attr("opacity", 0.8); // 设置背景透明度
+
+        // 添加斜线
+        pattern.append("line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", 0)
+            .attr("y2", patternDensity)
+            .attr("stroke", "white") // 斜线颜色
+            .attr("stroke-width", patternStrokeWidth)
+            .attr("opacity", 0.6); // 斜线透明度
+    });
+    // *** 结束添加纹理 ***
+
+    // ---------- 7. 创建图表区域 ----------
+    const chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // ---------- 8. 创建比例尺 ----------
+    // X比例尺（分类）用于主分类
+    const xScale = d3.scaleBand()
+        .domain(xValues)
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    // 分组比例尺，用于每个类别内的细分
+    const groupScale = d3.scaleBand()
+        .domain([0, 1]) // 只有两个柱子，左侧和右侧
+        .range([0, xScale.bandwidth()])
+        .padding(0.2); // 同一维度柱子之间的间隙，增加间隔
+
+    // Y比例尺（数值）- 直接使用最大值映射到可用高度
+    const dataMax = d3.max(useData, d => +d[yField]) || 100;
+    const yScale = d3.scaleLinear()
+        .domain([0, dataMax])
+        .range([innerHeight, 0]);
+
+    // ---------- 9. 文本宽度计算和字体大小调整 (移动到这里，在绘制坐标轴之前) ----------
+    // 创建格式化函数
+
+    // 数值标签的可用宽度 = bar宽度 + 间距
+    const barWidth = groupScale.bandwidth();
+    const valueSpacing = xScale.bandwidth() * 0.1;
+    const valueLabelAvailableWidth = barWidth; // 每个值标签只能占据其柱子的宽度
+
+    // 维度标签的可用宽度 = 两个bar宽度 + bar间距
+    const dimensionLabelAvailableWidth = xScale.bandwidth();
+
+    // 计算最长的数值标签和维度标签
+    let maxValueLabelWidth = 0;
+    let maxDimensionLabelWidth = 0;
+
+    // 计算所有数值标签的最大宽度
+    useData.forEach(d => {
+        const textWidth = chartUtils.text.measure(svg, chartUtils.format.appendUnit(+d[yField], yUnit) + (yUnit ? ` ${yUnit}` : ''), {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: "bold"
+        }).width;
+        maxValueLabelWidth = Math.max(maxValueLabelWidth, textWidth);
+    });
+
+    // 计算所有维度标签的最大宽度
+    xValues.forEach(xValue => {
+        const textWidth = chartUtils.text.measure(svg, xValue, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: "bold"
+        }).width;
+        maxDimensionLabelWidth = Math.max(maxDimensionLabelWidth, textWidth);
+    });
+
+    // 计算需要的字体缩放比例
+    const valueFontScale = Math.min(1, valueLabelAvailableWidth / maxValueLabelWidth);
+    const dimensionFontScale = Math.min(1, dimensionLabelAvailableWidth / maxDimensionLabelWidth);
+
+    // 计算实际使用的字体大小
+    const valueFontSize = Math.max(8, parseInt(typography.label.font_size) * valueFontScale); // 最小字体8px
+    const dimensionFontSize = Math.max(8, parseInt(typography.label.font_size) * dimensionFontScale);
+
+    // 计算动态文本大小的函数
+    const calculateFontSize = (text, maxWidth, baseSize = 12) => {
+        // 估算每个字符的平均宽度 (假设为baseSize的60%)
+        const avgCharWidth = baseSize * 0.6;
+        // 计算文本的估计宽度
+        const textWidth = text.length * avgCharWidth;
+        // 如果文本宽度小于最大宽度，返回基础大小
+        if (textWidth < maxWidth) {
+            return baseSize;
+        }
+        // 否则，按比例缩小字体大小
+        return Math.max(10, Math.floor(baseSize * (maxWidth / textWidth)));
+    };
+
+    // ---------- 10. 创建坐标轴 (原来的第9步) ----------
+    // 创建x轴组，用于添加刻度标签
+    const xAxisGroup = chart.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${innerHeight})`);
+
+    // 第一步：找出最长的标签并计算统一的字体大小
+    let maxLabelLength = 0;
+    const allLabels = xValues.map(d => d.toString());
+
+    // 找出最长的标签
+    const longestLabel = allLabels.reduce((a, b) => a.length > b.length ? a : b, "");
+
+    // 使用最长标签计算合适的统一字体大小
+    const labelMaxWidth = xScale.bandwidth()*1.3;
+    const uniformFontSize = calculateFontSize(longestLabel, labelMaxWidth, parseInt(typography.label.font_size));
+
+    // 绘制x轴标签
+    xAxisGroup.selectAll(".x-label")
+        .data(xValues)
+        .enter()
+        .append("text")
+        .attr("class", "x-label")
+        .attr("x", d => xScale(d) + xScale.bandwidth() / 2)
+        .attr("y", 20)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", `${uniformFontSize}px`) // 应用统一的字体大小
+        .style("font-weight", typography.label.font_weight)
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .text(d => d)
+        .each(function(d) {
+            const text = d3.select(this);
+            const labelText = d.toString();
+            const labelWidth = chartUtils.text.measure(null, labelText, {
+                fontFamily: typography.label.font_family,
+                fontSize: uniformFontSize,
+                fontWeight: typography.label.font_weight
+            }).width;
+
+            // 检查使用统一字体大小后，文本是否仍然超过可用宽度
+            if (labelWidth > labelMaxWidth) {
+                // 如果仍然太长，应用文本换行
+                wrapText(text, labelText, labelMaxWidth, 1.1);
+            }
+        });
+
+    // 文本换行助手函数
+    function wrapText(text, str, width, lineHeight) {
+        const words = str.split(/\s+/).reverse();
+        let word;
+        let line = [];
+        let lineNumber = 0;
+        const y = text.attr("y");
+        const dy = parseFloat(text.attr("dy") || 0);
+
+        // 先清空文本
+        text.text(null);
+
+        // 处理文本
+        let tspans = [];
+
+        // 如果没有空格可分割，按字符分割
+        if (words.length <= 1) {
+            const chars = str.split('');
+            let currentLine = '';
+
+            for (let i = 0; i < chars.length; i++) {
+                currentLine += chars[i];
+
+                // 测量候选文本宽度
+                const isOverflow = chartUtils.text.measure(null, currentLine, {
+                    fontFamily: text.style("font-family"),
+                    fontSize: parseFloat(text.style("font-size")),
+                    fontWeight: text.style("font-weight")
+                }).width > width;
+
+                if (isOverflow && currentLine.length > 1) {
+                    // 当前行过长，回退一个字符并换行
+                    currentLine = currentLine.slice(0, -1);
+
+                    // 添加到tspans数组
+                    tspans.push(currentLine);
+
+                    // 重新开始下一行
+                    currentLine = chars[i];
+                    lineNumber++;
+                }
+            }
+
+            // 添加最后一行
+            if (currentLine.length > 0) {
+                tspans.push(currentLine);
+            }
+        } else {
+            // 处理有空格的文本
+            let currentLine = [];
+
+            while (word = words.pop()) {
+                currentLine.push(word);
+
+                // 测量候选文本宽度
+                const isOverflow = chartUtils.text.measure(null, currentLine.join(" "), {
+                    fontFamily: text.style("font-family"),
+                    fontSize: parseFloat(text.style("font-size")),
+                    fontWeight: text.style("font-weight")
+                }).width > width;
+
+                if (isOverflow && currentLine.length > 1) {
+                    // 回退一个词
+                    currentLine.pop();
+
+                    // 添加到tspans数组
+                    tspans.push(currentLine.join(" "));
+
+                    // 重新开始下一行
+                    currentLine = [word];
+                    lineNumber++;
+                }
+            }
+
+            // 添加最后一行
+            if (currentLine.length > 0) {
+                tspans.push(currentLine.join(" "));
+            }
+        }
+
+        // 计算总行数
+        const totalLines = tspans.length;
+
+        // 计算垂���居中的起始位置
+        // 对于单行文本，y位置保持不变
+        // 对于多行文本，需要向上偏移以保持垂直居中
+        let startY = y;
+        if (totalLines > 1) {
+            // 向上偏移半行距离 * (总行数-1)
+            startY = parseFloat(y) - (lineHeight * (totalLines - 1) / 2);
+        }
+
+        // 创建所有行的tspan元素
+        tspans.forEach((lineText, i) => {
+            text.append("tspan")
+                .attr("x", text.attr("x"))
+                .attr("y", startY)
+                .attr("dy", `${i * lineHeight}em`)
+                .text(lineText);
+        });
+    }
+
+    // ---------- 11. 绘制图例 (原来的第10步) ----------
+    // 创建临时文本元素计算文本宽度
+    const legendItems = legendData.map(item => ({
+        label: item.key,
+        color: item.color,
+    }));
+    chartUtils.legend.centered(svg, legendItems, {}, width / 2, 30, {
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: legendSpacing,
+        fontSize: 12,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+
+    // 绘制条形图和标签
+    xValues.forEach(xValue => {
+        // 获取当前x类别的数据
+        const xData = useData.filter(d => d[xField] === xValue);
+
+        // 获取左侧柱子的数据
+        const leftBarData = xData.find(d => d[groupField] === leftBarGroup);
+
+        // 获取右侧柱子的数据
+        const rightBarData = xData.find(d => d[groupField] === rightBarGroup);
+
+        // 计算左侧柱子的位置和高度
+        const leftBarX = xScale(xValue);
+        let leftBarY, leftBarHeight, leftValue;
+
+        // --- Variables to track label/bar positions for icon placement ---
+        let minBarTopY = innerHeight;
+        let minExternalLabelTopY = innerHeight;
+        let leftLabelIsOutside = false; // Track label position
+        let rightLabelIsOutside = false;
+        // -------------------------------------------------------------
+
+        if (leftBarData) {
+            leftValue = leftBarData[yField];
+            leftBarHeight = innerHeight - yScale(leftValue);
+            leftBarY = yScale(leftValue);
+            minBarTopY = Math.min(minBarTopY, leftBarY);
+
+            // 绘制左侧柱子
+            chart.append("rect")
+                .attr("class", "bar left-bar")
+                .attr("x", leftBarX)
+                .attr("y", leftBarY)
+                .attr("width", barWidth)
+                .attr("height", leftBarHeight)
+                .attr("fill", "url(#pattern-left)")
+                .attr("rx", barWidth/2)
+                .attr("ry", barWidth/2)
+                .attr("stroke", variables.has_stroke ? "#555" : "none")
+                .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+
+            // 绘制左侧柱子顶部的标签
+            const leftValueText = chartUtils.format.appendUnit(leftValue, yUnit) + (yUnit ? ` ${yUnit}` : '');
+            let leftLabelFontSize = valueFontSize; // Start with calculated size
+            let leftTextWidth = chartUtils.text.measure(chart, leftValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${leftLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            const maxLabelWidth = barWidth * 1.1;
+            if (leftTextWidth > maxLabelWidth) {
+                leftLabelFontSize = Math.max(4, leftLabelFontSize * (maxLabelWidth / leftTextWidth));
+            }
+            // *** 修改: 判断标签是否能放入 Bar 内 ***
+            const labelHeightRequired = leftLabelFontSize + 10; // 字体高度 + 上下 padding
+            let leftLabelY, leftLabelColor, leftDominantBaseline = "auto"; // Default baseline
+
+            if (leftBarHeight > labelHeightRequired) {
+                // --- 放内部 ---
+                leftLabelY = leftBarY + 5; // 顶部向下一点
+                leftLabelColor = "#ffffff";
+                leftDominantBaseline = "hanging"; // 锚定到顶部
+                leftLabelIsOutside = false;
+            } else {
+                // --- 放外部 ---
+                leftLabelY = leftBarY - 5; // 柱子顶部向上一点
+                leftLabelColor = colorResolver.text({ fallback: "#333333" }).value;
+                // leftDominantBaseline remains 'auto' (middle-ish)
+                minExternalLabelTopY = Math.min(minExternalLabelTopY, leftLabelY - leftLabelFontSize); // Update highest point if label is outside
+                leftLabelIsOutside = true;
+            }
+
+            chart.append("text")
+                .attr("class", "bar-label left-label")
+                .attr("x", leftBarX + barWidth / 2)
+                .attr("y", leftLabelY) // 使用���算的 Y
+                .attr("dominant-baseline", leftDominantBaseline) // 设置 baseline
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${leftLabelFontSize}px`)
+                .style("font-weight", "bold")
+                .style("fill", leftLabelColor) // 使用计算的颜色
+                .text(leftValueText);
+        } else {
+             leftValue = 0;
+             leftBarHeight = 0;
+             leftBarY = innerHeight;
+        }
+
+        const rightBarX = leftBarX + barWidth + xScale.bandwidth() * 0.1;
+        let rightBarY, rightBarHeight, rightValue;
+
+        if (rightBarData) {
+            rightValue = rightBarData[yField];
+            rightBarHeight = innerHeight - yScale(rightValue);
+            rightBarY = yScale(rightValue);
+            minBarTopY = Math.min(minBarTopY, rightBarY);
+
+            // 绘制右侧柱子
+            chart.append("rect")
+                .attr("class", "bar right-bar")
+                .attr("x", rightBarX)
+                .attr("y", rightBarY)
+                .attr("width", barWidth)
+                .attr("height", rightBarHeight)
+                .attr("fill", "url(#pattern-right)")
+                .attr("rx", barWidth/2)
+                .attr("ry", barWidth/2)
+                .attr("stroke", variables.has_stroke ? "#555" : "none")
+                .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+
+            // 绘制右侧柱子顶部的标签
+            const rightValueText = chartUtils.format.appendUnit(rightValue, yUnit) + (yUnit ? ` ${yUnit}` : '');
+            let rightLabelFontSize = valueFontSize; // Start with calculated size
+            let rightTextWidth = chartUtils.text.measure(chart, rightValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${rightLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            const rightMaxLabelWidth = barWidth * 1.1;
+            if (rightTextWidth > rightMaxLabelWidth) {
+                rightLabelFontSize = Math.max(4, rightLabelFontSize * (rightMaxLabelWidth / rightTextWidth));
+            }
+            // *** 修改: 判断标签是否能放入 Bar 内 ***
+            const rightLabelHeightRequired = rightLabelFontSize + 10; // 字体高度 + 上下 padding
+            let rightLabelY, rightLabelColor, rightDominantBaseline = "auto";
+
+            if (rightBarHeight > rightLabelHeightRequired) {
+                // --- 放内部 ---
+                rightLabelY = rightBarY + 5;
+                rightLabelColor = "#ffffff";
+                rightDominantBaseline = "hanging";
+                rightLabelIsOutside = false;
+            } else {
+                // --- 放外部 ---
+                rightLabelY = rightBarY - 5;
+                rightLabelColor = colorResolver.text({ fallback: "#333333" }).value;
+                minExternalLabelTopY = Math.min(minExternalLabelTopY, rightLabelY - rightLabelFontSize);
+                rightLabelIsOutside = true;
+            }
+
+            chart.append("text")
+                .attr("class", "bar-label right-label")
+                .attr("x", rightBarX + barWidth / 2)
+                .attr("y", rightLabelY) // 使用计算的 Y
+                .attr("dominant-baseline", rightDominantBaseline) // 设置 baseline
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${rightLabelFontSize}px`)
+                .style("font-weight", "bold")
+                .style("fill", rightLabelColor) // 使用计算的颜色
+                .text(rightValueText);
+        } else {
+             rightValue = 0;
+             rightBarHeight = 0;
+             rightBarY = innerHeight;
+        }
+
+        // --- 图标绘制逻辑 ---
+        const iconMargin = 5; // 图标与上方元素的间距
+        const iconSize = 30;  // 保持图标大小
+
+        // 确定图标需要放置的最高点 (取 bar 顶部和外部标签顶部的最小值)
+        const placementRefY = Math.min(minBarTopY, minExternalLabelTopY);
+
+        // 计算图标 Y 坐标 (使其位于最高点上方)
+        const iconY = placementRefY - iconMargin - iconSize / 2 - 10;
+
+        // 获取图标 URL (假设 xValue 对应图标)
+        if (images.field && images.field[xValue]) {
+            const iconX = xScale(xValue) + xScale.bandwidth() / 2; // 中心 X
+
+            chart.append("image")
+                .attr("class", "category-icon-above") // 新类名?
+                .attr("x", iconX - iconSize / 2)
+                .attr("y", iconY) // 使用计算出的 Y 坐标
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("xlink:href", images.field[xValue]);
+        }
+        // --- 结束图标绘制逻辑 ---
+
+    }); // --- END xValues.forEach ---
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type3_vertical_group_bar_chart/vertical_group_bar_plain_chart_03.js

@@ -0,0 +1,641 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_plain_chart_03",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 2]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 垂直分组条形图实现   Vertical Grouped Bar Chart  plain chart#3  bar顶端三角
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备 ----------
+    // 提取数据和配置
+    const jsonData = data;
+    const chartData = jsonData.data.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#333333",
+        field: {},
+        other: {
+            primary: "#4682B4" // 默认主色调
+        }
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 如果不存在，添加副标题字段
+    typography.subtitle = typography.subtitle || typography.description;
+
+    // 设置视觉效果变量
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+    variables.has_spacing = variables.has_spacing || false;
+
+    // 清除容器
+    d3.select(containerSelector).html("");
+
+    // 添加数值格式化函数
+
+    // ---------- 2. 尺寸和布局设置 ----------
+    // 设置图表尺寸和边距
+    const width = variables.width || 800;
+    const height = variables.height || 500;
+
+    // 边距：上，右，下，左
+    const margin = {
+        top: 100,    // 标题和标签的空间
+        right: 30,  // 右侧标签的空间
+        bottom: 80, // x轴和标签的空间
+        left: 30    // y轴和标签的空间
+    };
+
+    // 计算实际绘图区域大小
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 3. 提取字段名称和单位 ----------
+    let xField, yField, groupField;
+    let xUnit = "", yUnit = "";
+
+    // 安全提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+    const groupChannel = chartUtils.schema.channel(jsonData, "group");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+    groupField = groupChannel.key;
+
+    // 获取字段单位
+    xUnit = xChannel.unit;
+    yUnit = yChannel.unit;
+
+    // ---------- 4. 数据处理 ----------
+    // 使用提供的数据
+    let useData = chartData;
+
+    // 获取x轴和分组的唯一值
+    const xValues = [...new Set(useData.map(d => d[xField]))];
+    let groupValues = [...new Set(useData.map(d => d[groupField]))];
+
+    // 如果组的数量不符合要求，给出警告
+    if (groupValues.length !== 2) {
+        console.warn("此图表需要恰好2个组字段");
+    }
+
+    // 第一个组是左侧柱子，第二个组是右侧柱子
+    const leftBarGroup = groupValues[0];
+    const rightBarGroup = groupValues[1];
+
+    // ---------- 5. 创建SVG容器 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    // ---------- 6. 创建视觉效果 ----------
+    const defs = svg.append("defs");
+
+    // 如果需要，创建阴影滤镜
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("width", "200%")
+            .attr("height", "200%");
+
+        filter.append("feGaussianBlur")
+            .attr("in", "SourceAlpha")
+            .attr("stdDeviation", 3);
+
+        filter.append("feOffset")
+            .attr("dx", 2)
+            .attr("dy", 2)
+            .attr("result", "offsetblur");
+
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+
+    // ---------- 7. 创建图表区域 ----------
+    const chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // ---------- 8. 创建比例尺 ----------
+    // X比例尺（分类）用于主分类
+    const xScale = d3.scaleBand()
+        .domain(xValues)
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    // 分组比例尺，用于每个类别内的细分
+    const groupScale = d3.scaleBand()
+        .domain([0, 1]) // 只有两个柱子，左侧和右侧
+        .range([0, xScale.bandwidth()])
+        .padding(0.2); // 同一维度柱子之间的间隙，增加间隔
+
+    // Y比例尺（数值）- 直接使用最大值映射到可用高度
+    const dataMax = d3.max(useData, d => +d[yField]) || 100;
+    const yScale = d3.scaleLinear()
+        .domain([0, dataMax])
+        .range([innerHeight, 0]);
+
+    // ---------- 9. 文本宽度计算和字体大小调整 (移动到这里，在绘制坐标轴之前) ----------
+    // 数值标签的可用宽度 = bar宽度 + 间距
+    const barWidth = groupScale.bandwidth();
+    const valueSpacing = xScale.bandwidth() * 0.1;
+    const valueLabelAvailableWidth = barWidth; // 每个值标签只能占据其柱子的宽度
+
+    // 维度标签的可用宽度 = 两个bar宽度 + bar间距
+    const dimensionLabelAvailableWidth = xScale.bandwidth();
+
+    // 计算最长的数值标签和维度标签
+    let maxValueLabelWidth = 0;
+    let maxDimensionLabelWidth = 0;
+
+    // 计算所有数值标签的最大宽度
+    useData.forEach(d => {
+        const textWidth = chartUtils.text.measure(svg, chartUtils.format.autoText(+d[yField]) + (yUnit ? ` ${yUnit}` : ''), {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: "bold"
+        }).width;
+        maxValueLabelWidth = Math.max(maxValueLabelWidth, textWidth);
+    });
+
+    // 计算所有维度标签的最大宽度
+    xValues.forEach(xValue => {
+        const textWidth = chartUtils.text.measure(svg, xValue, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: "bold"
+        }).width;
+        maxDimensionLabelWidth = Math.max(maxDimensionLabelWidth, textWidth);
+    });
+
+    // 计算需要的字体缩放比例
+    const valueFontScale = Math.min(1, valueLabelAvailableWidth / maxValueLabelWidth);
+    const dimensionFontScale = Math.min(1, dimensionLabelAvailableWidth / maxDimensionLabelWidth);
+
+    // 计算实际使用的字体大小
+    const valueFontSize = Math.max(8, parseInt(typography.label.font_size) * valueFontScale); // 最小字体8px
+    const dimensionFontSize = Math.max(8, parseInt(typography.label.font_size) * dimensionFontScale);
+
+    // 计算动态文本大小的函数
+    const calculateFontSize = (text, maxWidth, baseSize = 12) => {
+        // 估算每个字符的平均宽度 (假设为baseSize的60%)
+        const avgCharWidth = baseSize * 0.6;
+        // 计算文本的估计宽度
+        const textWidth = text.length * avgCharWidth;
+        // 如果文本宽度小于最大宽度，返回基础大小
+        if (textWidth < maxWidth) {
+            return baseSize;
+        }
+        // 否则，按比例缩小字体大小
+        return Math.max(10, Math.floor(baseSize * (maxWidth / textWidth)));
+    };
+
+    // ---------- 10. 创建坐标轴 (原来的第9步) ----------
+    // 底部的X轴（仅一条长线）
+    chart.append("line")
+        .attr("x1", 0)
+        .attr("y1", innerHeight)
+        .attr("x2", innerWidth)
+        .attr("y2", innerHeight)
+        .attr("stroke", "black")
+        .attr("stroke-width", 2);
+
+    // 创建x轴组，用于添加刻度标签
+    const xAxisGroup = chart.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${innerHeight})`);
+
+    // 第一步：找出最长的标签并计算统一的字体大小
+    let maxLabelLength = 0;
+    const allLabels = xValues.map(d => d.toString());
+
+    // 找出最长的标签
+    const longestLabel = allLabels.reduce((a, b) => a.length > b.length ? a : b, "");
+
+    // 使用最长标签计算合适的统一字体大小
+    const labelMaxWidth = xScale.bandwidth()*1.3;
+    const uniformFontSize = calculateFontSize(longestLabel, labelMaxWidth, parseInt(typography.label.font_size));
+
+    // 绘制x轴标签
+    xAxisGroup.selectAll(".x-label")
+        .data(xValues)
+        .enter()
+        .append("text")
+        .attr("class", "x-label")
+        .attr("x", d => xScale(d) + xScale.bandwidth() / 2)
+        .attr("y", 20)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", `${uniformFontSize}px`) // 应用统一的字体大小
+        .style("font-weight", typography.label.font_weight)
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .text(d => d)
+        .each(function(d) {
+            const text = d3.select(this);
+            const labelText = d.toString();
+            const labelWidth = chartUtils.text.measure(null, labelText, {
+                fontFamily: typography.label.font_family,
+                fontSize: uniformFontSize,
+                fontWeight: typography.label.font_weight
+            }).width;
+
+            // 检查使用统一字体大小后，文本是否仍然超过可用宽度
+            if (labelWidth > labelMaxWidth) {
+                // 如果仍然太长，应用文本换行
+                wrapText(text, labelText, labelMaxWidth, 1.1);
+            }
+        });
+
+    // 文本换行助手函数
+    function wrapText(text, str, width, lineHeight) {
+        const words = str.split(/\s+/).reverse();
+        let word;
+        let line = [];
+        let lineNumber = 0;
+        const y = text.attr("y");
+        const dy = parseFloat(text.attr("dy") || 0);
+
+        // 先清空文本
+        text.text(null);
+
+        // 处理文本
+        let tspans = [];
+
+        // 如果没有空格可分割，按字符分割
+        if (words.length <= 1) {
+            const chars = str.split('');
+            let currentLine = '';
+
+            for (let i = 0; i < chars.length; i++) {
+                currentLine += chars[i];
+
+                // 测量候选文本宽度
+                const isOverflow = chartUtils.text.measure(null, currentLine, {
+                    fontFamily: text.style("font-family"),
+                    fontSize: parseFloat(text.style("font-size")),
+                    fontWeight: text.style("font-weight")
+                }).width > width;
+
+                if (isOverflow && currentLine.length > 1) {
+                    // 当前行过长，回退一个字符并换行
+                    currentLine = currentLine.slice(0, -1);
+
+                    // 添加到tspans数组
+                    tspans.push(currentLine);
+
+                    // 重新开始下一行
+                    currentLine = chars[i];
+                    lineNumber++;
+                }
+            }
+
+            // 添加最后一行
+            if (currentLine.length > 0) {
+                tspans.push(currentLine);
+            }
+        } else {
+            // 处理有空格的文本
+            let currentLine = [];
+
+            while (word = words.pop()) {
+                currentLine.push(word);
+
+                // 测量候选文本宽度
+                const isOverflow = chartUtils.text.measure(null, currentLine.join(" "), {
+                    fontFamily: text.style("font-family"),
+                    fontSize: parseFloat(text.style("font-size")),
+                    fontWeight: text.style("font-weight")
+                }).width > width;
+
+                if (isOverflow && currentLine.length > 1) {
+                    // 回退一个词
+                    currentLine.pop();
+
+                    // 添加到tspans数组
+                    tspans.push(currentLine.join(" "));
+
+                    // 重新开始下一行
+                    currentLine = [word];
+                    lineNumber++;
+                }
+            }
+
+            // 添加最后一行
+            if (currentLine.length > 0) {
+                tspans.push(currentLine.join(" "));
+            }
+        }
+
+        // 计算总行数
+        const totalLines = tspans.length;
+
+        // 计算垂直居中的起始位置
+        // 对于单行文本，y位置保持不变
+        // 对于多行文本，需要向上偏移以保持垂直居中
+        let startY = y;
+        if (totalLines > 1) {
+            // 向上偏移半行距离 * (总行数-1)
+            startY = parseFloat(y) - (lineHeight * (totalLines - 1) / 2);
+        }
+
+        // 创建所有行的tspan元素
+        tspans.forEach((lineText, i) => {
+            text.append("tspan")
+                .attr("x", text.attr("x"))
+                .attr("y", startY)
+                .attr("dy", `${i * lineHeight}em`)
+                .text(lineText);
+        });
+    }
+
+    // ---------- 11. 绘制图例 (原来的第10步) ----------
+    // 创建临时文本元素计算文本宽度
+    const legendItems = legendData.map(item => ({
+        label: item.key,
+        color: item.color,
+    }));
+    chartUtils.legend.centered(svg, legendItems, {}, width / 2, 30, {
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: legendSpacing,
+        fontSize: 12,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+
+    // 计算图标大小 - 基于柱子宽度，但不受圆形限制
+    const iconSize = Math.min(barWidth * 0.8, 30); // 图标大小为柱子宽度的80%，最大30px
+
+    // 使用setTimeout确保DOM更新完成，从而获取精确的标签边界框
+    setTimeout(() => {
+        // 精确计算维度标签的最下方位置并绘制图标
+        let actualMaxLabelBottomY = Number.NEGATIVE_INFINITY;
+        const labelBottomOffset = labelNode => {
+            const label = d3.select(labelNode);
+            const fontSize = parseFloat(label.style("font-size")) || uniformFontSize;
+            const tspans = label.selectAll("tspan").nodes();
+            if (tspans.length > 0) {
+                const lastTspan = d3.select(tspans[tspans.length - 1]);
+                const y = parseFloat(lastTspan.attr("y") || label.attr("y") || 0);
+                const dy = parseFloat(lastTspan.attr("dy") || 0);
+                return y + dy * fontSize + fontSize * 0.3;
+            }
+            return (parseFloat(label.attr("y") || 0) || 0) + fontSize * 0.3;
+        };
+
+        const xLabels = chart.selectAll(".x-label").nodes(); // 获取DOM节点数组
+        if (xLabels.length > 0) {
+            xLabels.forEach(labelNode => {
+                try {
+                    const absoluteLabelBottom = innerHeight + labelBottomOffset(labelNode);
+                    actualMaxLabelBottomY = Math.max(actualMaxLabelBottomY, absoluteLabelBottom);
+                } catch (e) {
+                    console.warn("无法获取标签边界框:", e);
+                }
+            });
+        } else {
+            // 如果没有标签，提供一个默认的回退位置
+            actualMaxLabelBottomY = innerHeight + 20; // 默认在x轴下方20px
+        }
+
+        // 如果由于某种原因actualMaxLabelBottomY仍然是NEGATIVE_INFINITY，则使用默认值
+        if (actualMaxLabelBottomY === Number.NEGATIVE_INFINITY) {
+            actualMaxLabelBottomY = innerHeight + 20;
+        }
+
+        // 图标顶部的Y位置 = 计算出的标签最下方 + 5px间距
+        const iconTopY = actualMaxLabelBottomY + 5;
+
+        // 绘制所有图标
+        xValues.forEach(xValue => {
+            if (images.field && images.field[xValue]) {
+                const iconX = xScale(xValue) + xScale.bandwidth() / 2;
+                chart.append("image")
+                    .attr("class", "category-icon")
+                    .attr("x", iconX - iconSize / 2)
+                    .attr("y", iconTopY) // 图标的顶部Y坐标
+                    .attr("width", iconSize)
+                    .attr("height", iconSize)
+                    .attr("preserveAspectRatio", "xMidYMid meet")
+                    .attr("xlink:href", images.field[xValue]);
+            }
+        });
+    }, 0);
+
+    // 绘制条形图和标签
+    xValues.forEach(xValue => {
+        // 获取当前x类别的数据
+        const xData = useData.filter(d => d[xField] === xValue);
+
+        // 获取左侧柱子的数据
+        const leftBarData = xData.find(d => d[groupField] === leftBarGroup);
+
+        // 获取右侧柱子的数据
+        const rightBarData = xData.find(d => d[groupField] === rightBarGroup);
+
+        // 计算左侧柱子的位置和高度
+        const leftBarX = xScale(xValue);
+        let leftBarY, leftBarHeight, leftValue;
+
+        if (leftBarData) {
+            leftValue = leftBarData[yField];
+            leftBarHeight = innerHeight - yScale(leftValue);
+            leftBarY = yScale(leftValue);
+
+            // 绘制左侧柱子 - 改为path以添加三角形顶部
+            // 如果高度为0，跳过绘制
+            if (leftBarHeight > 0) {
+                // 三角形的高度，设置为条形图宽度，但最小10px，最大30px
+                const leftTriangleHeight = Math.min(30, Math.max(10, barWidth));
+                // 确保三角形高度不超过总高度
+                const leftActualTriangleHeight = Math.min(leftTriangleHeight, leftBarHeight);
+
+                chart.append("path")
+                    .attr("class", "bar left-bar")
+                    .attr("d", () => {
+                        // 构建路径 - 从左下角开始
+                        let path = `M ${leftBarX} ${innerHeight}`;
+                        // 到左上角（矩形顶部）
+                        path += ` L ${leftBarX} ${leftBarY + leftActualTriangleHeight}`;
+                        // 到三角形左侧点
+                        path += ` L ${leftBarX} ${leftBarY + leftActualTriangleHeight}`;
+                        // 到三角形顶点
+                        path += ` L ${leftBarX + barWidth / 2} ${leftBarY}`;
+                        // 到三角形右侧点
+                        path += ` L ${leftBarX + barWidth} ${leftBarY + leftActualTriangleHeight}`;
+                        // 到右上角（矩形顶部）
+                        path += ` L ${leftBarX + barWidth} ${leftBarY + leftActualTriangleHeight}`;
+                        // 到右下角
+                        path += ` L ${leftBarX + barWidth} ${innerHeight}`;
+                        // 闭合路径
+                        path += ` Z`;
+                        return path;
+                    })
+                    .attr("fill", colorResolver.field(leftBarGroup, 0, { fallback: "#4269d0" }).value)
+                    .attr("stroke", variables.has_stroke ? "#555" : "none")
+                    .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            }
+
+            // 绘制左侧柱子顶部的标签
+            // 首先计算标签文本宽度并调整字体大小
+            const leftValueText = chartUtils.format.autoText(leftValue) + (yUnit ? ` ${yUnit}` : '');
+            let leftLabelFontSize = valueFontSize; // 默认使用之前计算的字体大小
+
+            let leftTextWidth = chartUtils.text.measure(chart, leftValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${leftLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            // 最大允许宽度为柱子宽度的1.1倍
+            const maxLabelWidth = barWidth * 1.1;
+
+            // 如果文本宽度超过允许值，动态缩小字体
+            if (leftTextWidth > maxLabelWidth) {
+                // 按比例计算新字体大小
+                leftLabelFontSize = Math.max(4, leftLabelFontSize * (maxLabelWidth / leftTextWidth));
+                leftTextWidth = chartUtils.text.measure(chart, leftValueText, {
+                    fontFamily: typography.label.font_family,
+                    fontSize: `${leftLabelFontSize}px`,
+                    fontWeight: "bold"
+                }).width;
+            }
+
+            // 使用调整后的字体大小绘制标签
+            chart.append("text")
+                .attr("class", "bar-label")
+                .attr("x", leftBarX + barWidth / 2)
+                .attr("y", leftBarY - 5)
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${leftLabelFontSize}px`) // 使用动态调整的字体大小
+                .style("font-weight", "bold")
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(leftValueText);
+        }
+
+        // 计算右侧柱子的位置和高度
+        // 使用groupScale正确计算右侧柱子的位置，确保两个柱子之间有间距
+        const rightBarX = leftBarX + barWidth + xScale.bandwidth() * 0.1; // 添加额外间距为柱子宽度的10%
+        let rightBarY, rightBarHeight, rightValue;
+
+        if (rightBarData) {
+            rightValue = rightBarData[yField];
+            rightBarHeight = innerHeight - yScale(rightValue);
+            rightBarY = yScale(rightValue);
+
+            // 绘制右侧柱子 - 改为path以添加三角形顶部
+            // 如果高度为0，跳过绘制
+            if (rightBarHeight > 0) {
+                // 三角形的高度，设置为条形图宽度，但最小10px，最大30px
+                const rightTriangleHeight = Math.min(30, Math.max(10, barWidth));
+                // 确保三角形高度不超过总高度
+                const rightActualTriangleHeight = Math.min(rightTriangleHeight, rightBarHeight);
+
+                chart.append("path")
+                    .attr("class", "bar right-bar")
+                    .attr("d", () => {
+                        // 构建路径 - 从左下角开始
+                        let path = `M ${rightBarX} ${innerHeight}`;
+                        // 到左上角（矩形顶部）
+                        path += ` L ${rightBarX} ${rightBarY + rightActualTriangleHeight}`;
+                        // 到三角形左侧点
+                        path += ` L ${rightBarX} ${rightBarY + rightActualTriangleHeight}`;
+                        // 到三角形顶点
+                        path += ` L ${rightBarX + barWidth / 2} ${rightBarY}`;
+                        // 到三角形右侧点
+                        path += ` L ${rightBarX + barWidth} ${rightBarY + rightActualTriangleHeight}`;
+                        // 到右上角（矩形顶部）
+                        path += ` L ${rightBarX + barWidth} ${rightBarY + rightActualTriangleHeight}`;
+                        // 到右下角
+                        path += ` L ${rightBarX + barWidth} ${innerHeight}`;
+                        // 闭合路径
+                        path += ` Z`;
+                        return path;
+                    })
+                    .attr("fill", colorResolver.field(rightBarGroup, 0, { fallback: "#ff725c" }).value)
+                    .attr("stroke", variables.has_stroke ? "#555" : "none")
+                    .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            }
+
+            // 绘制右侧柱子顶部的��签
+            // 首先计算标签文本宽度并调整字体大小
+            const rightValueText = chartUtils.format.autoText(rightValue) + (yUnit ? ` ${yUnit}` : '');
+            let rightLabelFontSize = valueFontSize; // 默认使用之前计算的字体大小
+
+            let rightTextWidth = chartUtils.text.measure(chart, rightValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${rightLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            // 最大允许宽度为柱子宽度的1.1倍
+            const rightMaxLabelWidth = barWidth * 1.1;
+
+            // 如果文本宽度超过允许值，动态缩小字体
+            if (rightTextWidth > rightMaxLabelWidth) {
+                // 按比例计算新字体大小
+                rightLabelFontSize = Math.max(4, rightLabelFontSize * (rightMaxLabelWidth / rightTextWidth));
+                rightTextWidth = chartUtils.text.measure(chart, rightValueText, {
+                    fontFamily: typography.label.font_family,
+                    fontSize: `${rightLabelFontSize}px`,
+                    fontWeight: "bold"
+                }).width;
+            }
+
+            // 使用调整后的字体大小绘制标签
+            chart.append("text")
+                .attr("class", "bar-label")
+                .attr("x", rightBarX + barWidth / 2)
+                .attr("y", rightBarY - 5)
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", `${rightLabelFontSize}px`) // 使用动态调整的字体大小
+                .style("font-weight", "bold")
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(rightValueText);
+        }
+    });
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type3_vertical_group_bar_chart/vertical_group_bar_plain_chart_04.js

@@ -0,0 +1,468 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Grouped Bar Chart",
+    "chart_name": "vertical_group_bar_plain_chart_04",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 5], [0, "inf"], [2, 3]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 600,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+/* ───────── 代码主体 ───────── */
+function makeChart(containerSelector, dataJSON) {
+
+    /* ============ 1. 字段检查 ============ */
+    const xChannel = chartUtils.schema.channel(dataJSON, "x", { fallbackKey: "" });
+    const yChannel = chartUtils.schema.channel(dataJSON, "y", { fallbackKey: "" });
+    const groupChannel = chartUtils.schema.channel(dataJSON, "group", { fallbackKey: "" });
+    const xField = xChannel.key;
+    const yField = yChannel.key;
+    const groupField = groupChannel.key;
+    const yUnit = yChannel.unit;
+    if(!xField || !yField || !groupField){
+        d3.select(containerSelector).html('<div style="color:red">缺少必要字段</div>');
+        return;
+    }
+
+    const raw = dataJSON.data.data.filter(d=>+d[yField]>0);
+    if(!raw.length){
+        d3.select(containerSelector).html('<div>无有效数据</div>');
+        return;
+    }
+
+    /* ============ 2. 尺寸与比例尺 ============ */
+    const fullW = dataJSON.variables?.width  || 600;
+    const fullH = dataJSON.variables?.height || 400;
+    const margin = { top: 80, right: 40, bottom: 80, left: 40 }; // 边距调整，增加底部和顶部空间
+    const W = fullW  - margin.left - margin.right; // 绘图区域宽度
+    const H = fullH  - margin.top  - margin.bottom; // 绘图区域高度
+    const colorResolver = chartUtils.color.resolver(dataJSON);
+
+    // 获取主颜色
+    const primaryColor = colorResolver.other("primary", { fallback: "#C13C37" }).value; // 默认为红色
+
+    // 数据处理
+    // 获取所有唯一的x值和group值
+    const xValues = Array.from(new Set(raw.map(d => d[xField])));
+    const groupValues = Array.from(new Set(raw.map(d => d[groupField])));
+    
+    // 计算每个分组的最大值，用于比例尺
+    const maxValue = d3.max(raw, d => +d[yField]); 
+
+    // 计算分组间距和条形宽度
+    const xGroupScale = d3.scaleBand()
+        .domain(xValues)
+        .range([0, W])
+        .padding(0.2);
+        
+    const xBarScale = d3.scaleBand()
+        .domain(groupValues)
+        .range([0, xGroupScale.bandwidth()])
+        .padding(0.1);
+    
+    // 高度比例尺，留出上方空间给数值标签
+    const yScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([H, 50]);
+    
+    /* ============ 3. 绘图 ============ */
+    d3.select(containerSelector).html(""); // 清空容器
+    
+    // 创建 SVG 画布
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%") // 宽度占满容器
+        .attr("height", fullH) // 高度固定
+        .attr("viewBox", `0 0 ${fullW} ${fullH}`) // 设置视窗
+        .attr("preserveAspectRatio", "xMidYMid meet") // 保持宽高比
+        .style("max-width", "100%") // 最大宽度
+        .style("height", "auto") // 高度自适应
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    // 创建阴影效果滤镜
+    const defs = svg.append("defs");
+    const shadowFilter = defs.append("filter")
+        .attr("id", "bar-shadow")
+        .attr("width", "150%")
+        .attr("height", "150%");
+        
+    // 添加阴影效果
+    shadowFilter.append("feDropShadow")
+        .attr("dx", "2") // 水平偏移
+        .attr("dy", "2") // 垂直偏移
+        .attr("stdDeviation", "2") // 模糊度
+        .attr("flood-color", "rgba(0,0,0,0.3)") // 阴影颜色
+        .attr("flood-opacity", "0.4"); // 阴影不透明度
+
+    // 创建主绘图区域 <g> 元素，应用边距
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    /* ---- 文本和样式设置 ---- */
+    // 提取字体排印设置，提供默认值
+    const valueFontFamily = dataJSON.typography?.annotation?.font_family || 'Arial';
+    const valueFontSize = parseFloat(dataJSON.typography?.annotation?.font_size || '12'); // 数值标签字号
+    const valueFontWeight = dataJSON.typography?.annotation?.font_weight || 'bold'; // 数值标签字重
+    const categoryFontFamily = dataJSON.typography?.label?.font_family || 'Arial';
+    const categoryFontSize = 11;
+    const categoryFontWeight = dataJSON.typography?.label?.font_weight || 'normal'; // 维度��签字重
+    
+    // 辅助函数 - 使用canvas测量文本宽度
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function measureTextWidth(text, fontFamily, fontSize, fontWeight) {
+        return chartUtils.text.measure(null, text, { fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }).width;
+    }
+
+    // 添加数值格式化函数
+
+    // 文本分行辅助函数
+    function splitTextIntoLines(text, fontFamily, fontSize, maxWidth, fontWeight) {
+        if (!text) return [""];
+        
+        const words = text.split(/\s+/);
+        const lines = [];
+        let currentLine = "";
+        
+        // 如果单词很少，可能是中文或者其他不使用空格分隔的语言
+        if (words.length <= 2 && text.length > 5) {
+            // 按字符分割
+            const chars = text.split('');
+            currentLine = chars[0] || "";
+            
+            for (let i = 1; i < chars.length; i++) {
+                const testLine = currentLine + chars[i];
+                if (measureTextWidth(testLine, fontFamily, fontSize, fontWeight) <= maxWidth) {
+                    currentLine = testLine;
+                } else {
+                    lines.push(currentLine);
+                    currentLine = chars[i];
+                }
+            }
+            
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+        } else {
+            // 按单词分割
+            currentLine = words[0] || "";
+            
+            for (let i = 1; i < words.length; i++) {
+                const testLine = currentLine + " " + words[i];
+                if (measureTextWidth(testLine, fontFamily, fontSize, fontWeight) <= maxWidth) {
+                    currentLine = testLine;
+                } else {
+                    lines.push(currentLine);
+                    currentLine = words[i];
+                }
+            }
+            
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+        }
+        
+        return lines;
+    }
+    
+    // 专门用于数值标签的文本分行函数
+    function splitValueTextIntoLines(text, fontFamily, fontSize, fontWeight, maxWidthForSplit) {
+        if (!text) return [""];
+        const lines = [];
+        if (maxWidthForSplit <= 0) return [text]; // 防止条形宽度过小导致问题
+
+        let currentLine = "";
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            const testLine = currentLine + char;
+            if (measureTextWidth(testLine, fontFamily, fontSize, fontWeight) <= maxWidthForSplit) {
+                currentLine = testLine;
+            } else {
+                if (currentLine === "") { // 当前字符本身就超出宽度
+                    lines.push(char);
+                    // currentLine 保持为空，因为这个字符自成一行
+                } else {
+                    lines.push(currentLine);
+                    currentLine = char; // 新行以当前字符开始
+                }
+            }
+        }
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        // 如果没有产生任何行，确保返回包含原始文本的一行
+        return lines.length > 0 ? lines : (text ? [text] : [""]);
+    }
+    
+    // 创建轴线（基准线）
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", H)
+        .attr("x2", W)
+        .attr("y2", H)
+        .attr("stroke", "#aaa")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3,3");
+
+    // 创建圆角三角形路径的辅助函数
+    function createRoundedTrianglePath(topPoint, leftPoint, rightPoint, radius) {
+        // 计算每个顶点的单位向量方向
+        function calculateUnitVector(p1, p2) {
+            const dx = p2[0] - p1[0];
+            const dy = p2[1] - p1[1];
+            const length = Math.sqrt(dx * dx + dy * dy);
+            return [dx / length, dy / length];
+        }
+        
+        // 顶点间的向量
+        const top_left = calculateUnitVector(topPoint, leftPoint);
+        const left_right = calculateUnitVector(leftPoint, rightPoint);
+        const right_top = calculateUnitVector(rightPoint, topPoint);
+        
+        // 计算圆角起始点
+        const topLeftStart = [
+            topPoint[0] + top_left[0] * radius, 
+            topPoint[1] + top_left[1] * radius
+        ];
+        const leftRightStart = [
+            leftPoint[0] + left_right[0] * radius, 
+            leftPoint[1] + left_right[1] * radius
+        ];
+        const rightTopStart = [
+            rightPoint[0] + right_top[0] * radius, 
+            rightPoint[1] + right_top[1] * radius
+        ];
+        
+        // 计算圆角结束点
+        const topRightEnd = [
+            topPoint[0] + right_top[0] * radius * -1, 
+            topPoint[1] + right_top[1] * radius * -1
+        ];
+        const leftTopEnd = [
+            leftPoint[0] + top_left[0] * radius * -1, 
+            leftPoint[1] + top_left[1] * radius * -1
+        ];
+        const rightLeftEnd = [
+            rightPoint[0] + left_right[0] * radius * -1, 
+            rightPoint[1] + left_right[1] * radius * -1
+        ];
+        
+        // 构建圆角三角形的路径
+        return `
+            M ${topLeftStart[0]},${topLeftStart[1]}
+            L ${leftTopEnd[0]},${leftTopEnd[1]}
+            A ${radius},${radius} 0 0 0 ${leftRightStart[0]},${leftRightStart[1]}
+            L ${rightLeftEnd[0]},${rightLeftEnd[1]}
+            A ${radius},${radius} 0 0 0 ${rightTopStart[0]},${rightTopStart[1]}
+            L ${topRightEnd[0]},${topRightEnd[1]}
+            A ${radius},${radius} 0 0 0 ${topLeftStart[0]},${topLeftStart[1]}
+            Z
+        `;
+    }
+
+    // 检查x轴标签的宽度，决定是否旋转
+    const shouldRotateLabels = xValues.some(x => {
+        const width = measureTextWidth(x, categoryFontFamily, categoryFontSize, categoryFontWeight);
+        return width > xGroupScale.bandwidth() * 0.8;
+    });
+
+    // 绘制x轴标签
+    xValues.forEach(x => {
+        const xPos = xGroupScale(x) + xGroupScale.bandwidth() / 2;
+        
+        if (shouldRotateLabels) {
+            g.append("text")
+                .attr("class", "x-axis-label")
+                .attr("text-anchor", "end")
+                .attr("x", xPos)
+                .attr("y", H + 10)
+                .attr("transform", `rotate(-45, ${xPos}, ${H + 10})`)
+                .style("font-family", categoryFontFamily)
+                .style("font-size", `${categoryFontSize}px`)
+                .style("font-weight", categoryFontWeight)
+                .style("fill", "#333")
+                .text(x);
+        } else {
+            // 如果标签太长，分行显示
+            const maxWidth = xGroupScale.bandwidth() * 0.9;
+            const lines = splitTextIntoLines(x, categoryFontFamily, categoryFontSize, maxWidth, categoryFontWeight);
+            const lineHeight = categoryFontSize * 1.2;
+            
+            lines.forEach((line, i) => {
+                g.append("text")
+                    .attr("class", "x-axis-label")
+                    .attr("text-anchor", "middle")
+                    .attr("x", xPos)
+                    .attr("y", H + 15 + i * lineHeight)
+                    .style("font-family", categoryFontFamily)
+                    .style("font-size", `${categoryFontSize}px`)
+                    .style("font-weight", categoryFontWeight)
+                    .style("fill", "#333")
+                    .text(line);
+            });
+        }
+    });
+
+    // 绘制每个分组下的条形
+    xValues.forEach(x => {
+        groupValues.forEach(group => {
+            // 查找对应的数据点
+            const dataPoint = raw.find(d => d[xField] === x && d[groupField] === group);
+            if (!dataPoint) return; // 跳过没有数据的组合
+            
+            const value = +dataPoint[yField];
+            if (value <= 0) return; // 跳过0或负值
+            
+            // 获取对应group的颜色，如果没有则使用主颜色
+            const color = colorResolver.field(group, groupValues.indexOf(group), { fallback: primaryColor, useAvailable: false }).value;
+            
+            // 计算条形位置和尺寸
+            const barX = xGroupScale(x) + xBarScale(group);
+            const barY = yScale(value);
+            const barHeight = H - barY;
+            const barWidth = xBarScale.bandwidth();
+            const barMidX = barX + barWidth / 2;
+            
+            // 创建三角形路径坐标
+            const cornerRadius = 4; // 圆角半径
+            const trianglePath = createRoundedTrianglePath(
+                [barMidX, barY],                // 顶点（上）
+                [barX, H],                      // 左下角
+                [barX + barWidth, H],           // 右下角
+                cornerRadius
+            );
+            
+            // 绘制三角形
+            g.append("path")
+                .attr("class", "bar")
+                .attr("d", trianglePath)
+                .attr("fill", color)
+                .attr("fill-opacity", 0.7) // 设置透明度
+                .attr("filter", "url(#bar-shadow)");
+                
+            // 添加数值标签 - 修改为始终在条形上方
+            const formattedValue = chartUtils.format.autoText(value);
+            const valText = `${formattedValue}${yUnit}`;
+            
+            // 使用条形宽度作为文本换行的最大宽度
+            const maxTextWidth = barWidth - 4;
+            const lines = splitValueTextIntoLines(valText, valueFontFamily, valueFontSize, valueFontWeight, maxTextWidth);
+            
+            const actualLineHeight = valueFontSize * 1.2; // 每行文本的估计高度 (包括行间距)
+            const wrappedLabelHeight = lines.length * actualLineHeight;
+            
+            // 计算标签位置 - 始终在条形上方
+            const labelAboveBarBottomMargin = 4; // 标签底部与条形顶部的间距
+            
+            // 计算第一行文本中心点的Y坐标
+            // 确保最后一行文本的底部与条形顶部有一定间距
+            const startYForFirstLineCenter = barY - labelAboveBarBottomMargin - wrappedLabelHeight + actualLineHeight / 2;
+            
+            // 为上方的标签添加背景矩形以提高可读性
+            const maxWrappedTextWidth = d3.max(lines, l => measureTextWidth(l, valueFontFamily, valueFontSize, valueFontWeight)) || 0;
+            if (maxWrappedTextWidth > 0) {
+                const rectPadding = 3; // 内边距
+                const bgRectWidth = Math.max(barWidth, maxWrappedTextWidth + rectPadding * 2); // 背景矩形宽度
+                const bgRectHeight = wrappedLabelHeight + rectPadding; // 背景矩形高度
+                
+                // 背景矩形的Y坐标 (矩形顶部)
+                const bgRectY = startYForFirstLineCenter - (actualLineHeight / 2) - rectPadding / 2;
+                
+                g.append("rect")
+                    .attr("x", barMidX - bgRectWidth / 2) // 水平居中于条形
+                    .attr("y", bgRectY)
+                    .attr("width", bgRectWidth)
+                    .attr("height", bgRectHeight)
+                    .attr("rx", 2)
+                    .attr("ry", 2)
+                    .attr("fill", "#fff")
+                    .attr("fill-opacity", 0.9); // 背景稍微透明
+            }
+            
+            // 绘制每一行文本
+            lines.forEach((line, i) => {
+                const textY = startYForFirstLineCenter + (i * actualLineHeight);
+                g.append("text")
+                    .attr("class", "value-label")
+                    .attr("text-anchor", "middle")
+                    .attr("x", barMidX)
+                    .attr("y", textY)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", valueFontFamily)
+                    .style("font-size", `${valueFontSize}px`)
+                    .style("font-weight", valueFontWeight)
+                    .style("fill", color)
+                    .text(line);
+            });
+        });
+    });
+    
+    /* ============ 4. 添加动态图例 ============ */ // 支持图例换行并且居中，并且能够让图例刚好在chart上方
+    if (groupValues && groupValues.length > 0) {
+        const legendMarkerWidth = 12; // 图例标记宽度
+        const legendMarkerHeight = 12; // 图例标记高度
+        const legendMarkerRx = 3; // 图例标记圆角X
+        const legendPadding = 6; // 图例标记和文本之间的间距
+        const legendInterItemSpacing = 12; // 图例项之间的水平间距
+        
+        const legendFontFamily = dataJSON.typography?.label?.font_family || 'Arial'; // 图例字体
+        const legendFontSize = parseFloat(dataJSON.typography?.label?.font_size || '11'); // 图例字号
+        const legendFontWeight = dataJSON.typography?.label?.font_weight || 'normal'; // 图例字重
+        const availableWidthForLegendWrapping = W; // W = fullW - margin.left - margin.right
+        const itemMaxHeight = Math.max(legendMarkerHeight, legendFontSize); // 单行图例内容的最大高度
+        const legendOptions = {
+            color: (group, index) => colorResolver.field(group, index, { fallback: primaryColor, useAvailable: false }).value,
+            markerShape: "rect",
+            markerWidth: legendMarkerWidth,
+            markerHeight: legendMarkerHeight,
+            markerSize: legendMarkerWidth,
+            markerRadius: legendMarkerRx,
+            markerOpacity: 0.85,
+            labelGap: legendPadding,
+            itemGap: legendInterItemSpacing,
+            rowGap: 6,
+            itemHeight: itemMaxHeight,
+            itemPaddingEnd: 0,
+            maxWidth: availableWidthForLegendWrapping,
+            align: "center",
+            fontFamily: legendFontFamily,
+            fontSize: legendFontSize,
+            fontWeight: legendFontWeight,
+            textColor: "#333",
+            className: "custom-legend-container",
+        };
+        const legendLayout = chartUtils.legend.layout(groupValues, { ...legendOptions, context: svg });
+
+        if (legendLayout.items.length > 0) {
+            const paddingBelowLegendToChart = 15; // 图例块底部与图表顶部的间距
+            const minSvgGlobalTopPadding = 15; // SVG顶部到图例块的最小间距
+
+            let legendBlockStartY = margin.top - paddingBelowLegendToChart - legendLayout.height;
+            legendBlockStartY = Math.max(minSvgGlobalTopPadding, legendBlockStartY); // 确保不超出SVG顶部
+
+            chartUtils.legend.draw(svg, groupValues, {
+                ...legendOptions,
+                x: (fullW - availableWidthForLegendWrapping) / 2,
+                y: legendBlockStartY,
+            });
+        }
+    }
+
+    return svg.node(); // 返回 SVG DOM 节点
+}