Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/bar_chart/horizontal_bar_chart_0.js.bug

@@ -0,0 +1,212 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Bar Chart",
+    "chart_name": "horizontal_bar_chart_0",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, 100000]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 300,
+    "min_width": 300,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+
+function makeChart(containerSelector, 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 = jsonData.data.columns || []; // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_stroke = variables.has_stroke || false;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 300;
+    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 = dataColumns.find(col => col.role === "x")?.name || "period";
+    const yField = dataColumns.find(col => col.role === "y")?.name || "value";
+    
+    // 获取字段单位（如果存在）
+    let xUnit = "";
+    let yUnit = "";
+    let groupUnit = "";
+    
+    if (dataColumns.find(col => col.role === "x")?.unit !== "none") {
+        xUnit = dataColumns.find(col => col.role === "x").unit;
+    }
+    
+    if (dataColumns.find(col => col.role === "y")?.unit !== "none") {
+        yUnit = dataColumns.find(col => col.role === "y").unit;
+    }
+
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 处理数据，确保数据格式正确
+    const processedData = chartData.map(d => ({
+        category: d[xField],
+        value: +d[yField] // 确保转换为数字
+    })).sort((a, b) => b.value - a.value); // 按值降序排序
+    
+    // ---------- 5. 创建比例尺 ----------
+    
+    // Y轴比例尺 - 使用分类数据
+    const yScale = d3.scaleBand()
+        .domain(processedData.map(d => d.category))
+        .range([0, chartHeight])
+        .padding(0.3);
+    
+    // X轴比例尺 - 使用数值
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(processedData, d => d.value)])
+        .range([0, chartWidth])
+        .nice();
+
+    // 颜色比例尺
+    const colorScale = d3.scaleOrdinal()
+        .domain(processedData.map(d => d.category))
+        .range([colors.other.primary, colors.other.primary]);
+
+    // ---------- 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 xAxis = d3.axisBottom(xScale)
+        .ticks(5)
+        .tickFormat(d => d + (yUnit ? ` ${yUnit}` : ''))
+        .tickSize(0)          // 移除刻度线
+        .tickPadding(10);     // 增加文字和轴的间距
+        
+    
+    chartGroup.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${chartHeight})`)
+        .call(xAxis)
+        .call(g => g.select(".domain").remove())  // 移除轴线
+        .selectAll("text")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", colors.text_color)
+        .style("opacity", 0); // 隐藏X轴文本
+    
+    // 添加Y轴（不显示刻度线）
+    const yAxis = d3.axisLeft(yScale)
+        .tickSize(0); // 移除刻度线
+    
+    chartGroup.append("g")
+        .attr("class", "y-axis")
+        .call(yAxis)
+        .call(g => g.select(".domain").remove())  // 移除轴线
+        .selectAll("text")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", colors.text_color);
+    
+    // 添加条形
+    const bars = chartGroup.selectAll(".bar")
+        .data(processedData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("y", d => yScale(d.category))
+        .attr("x", 0)
+        .attr("height", yScale.bandwidth())
+        .attr("width", d => xScale(d.value)) // 直接设置最终宽度
+        .attr("fill", d => colorScale(d.category));
+    
+    // 添加数值格式化函数
+    const formatValue = (value) => {
+        if (value >= 1000000000) {
+            return d3.format("~g")(value / 1000000000) + "B";
+        } else if (value >= 1000000) {
+            return d3.format("~g")(value / 1000000) + "M";
+        } else if (value >= 1000) {
+            return d3.format("~g")(value / 1000) + "K";
+        } else {
+            return d3.format("~g")(value);
+        }
+    }
+    
+    // 添加数值标签
+    const labels = chartGroup.selectAll(".label")
+        .data(processedData)
+        .enter()
+        .append("text")
+        .attr("class", "label")
+        .attr("y", d => yScale(d.category) + yScale.bandwidth() / 2)
+        .attr("x", d => xScale(d.value) + 5)
+        .attr("dy", ".35em")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", typography.label.font_size)
+        .style("fill", colors.text_color)
+        .text(d => `${formatValue(d.value)}${yUnit ? ` ${yUnit}` : ''}`)
+        .style("opacity", 1); // 直接设置为可见
+    
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_diverging_bar_chart_11.js

@@ -0,0 +1,444 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Diverging Bar Chart",
+    "chart_name": "horizontal_diverging_bar_chart_11",
+    "chart_for": "comparison",
+    "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": [],
+    "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": "none",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// Reference-local card layout for selected GPT image-2 sample_00 variant_03.
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const rawData = Array.isArray(jsonData.data) ? jsonData.data : (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const width = Math.max(+variables.width || 714, 1180);
+    const height = Math.min(Math.max(+variables.height || 520, 500), 540);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const dimensionChannel = chartUtils.schema.channel(jsonData, "x");
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    const groupChannel = chartUtils.schema.channel(jsonData, "group");
+    const dimensionField = dimensionChannel.key;
+    const valueField = valueChannel.key;
+    const groupField = groupChannel.key;
+    const dimensionUnit = dimensionChannel.unit && dimensionChannel.unit !== "none" ? dimensionChannel.unit : "";
+    const valueUnit = valueChannel.unit && valueChannel.unit !== "none" ? valueChannel.unit : "";
+    const groupUnit = groupChannel.unit && groupChannel.unit !== "none" ? groupChannel.unit : "";
+
+    const groups = [...new Set(rawData.map(d => d[groupField]))].slice(0, 2);
+    const dimensions = [...new Set(rawData.map(d => d[dimensionField]))].sort((a, b) => {
+        const na = +a;
+        const nb = +b;
+        if (Number.isFinite(na) && Number.isFinite(nb)) return na - nb;
+        return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
+    });
+    const leftGroup = groups[0];
+    const rightGroup = groups[1];
+    const complete = groups.length === 2 && dimensions.every(dimension =>
+        rawData.some(d => d[dimensionField] === dimension && d[groupField] === leftGroup) &&
+        rawData.some(d => d[dimensionField] === dimension && d[groupField] === rightGroup)
+    );
+
+    if (!complete) {
+        d3.select(containerSelector)
+            .append("div")
+            .style("color", "#b87312")
+            .style("text-align", "center")
+            .style("padding", "20px")
+            .style("font-family", typography.label.font_family || "Arial")
+            .style("font-size", typography.label.font_size || "12px")
+            .text("Missing paired group data for horizontal diverging bars.");
+        return;
+    }
+
+    const values = rawData.map(d => Math.max(0, +d[valueField] || 0));
+    const maxValue = d3.max(values) || 1;
+    const titleText = [
+        jsonData.title,
+        jsonData.titles && jsonData.titles.main_title,
+        jsonData.title_text,
+        jsonData.meta && jsonData.meta.title
+    ].filter(Boolean).join(" ");
+
+    const leftColor = "#1762d4";
+    const leftLight = "#eaf2ff";
+    const rightColor = "#d79519";
+    const rightLight = "#fff4dc";
+    const textColor = colorResolver.text({ fallback: "#12275c" }).value;
+
+    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")
+        .attr("data-chart-variation", "horizontal_diverging_bar_chart_11")
+        .attr("data-reference-layout", "sample_00_gpt_image_2_03");
+
+    const defs = svg.append("defs");
+    const filter = defs.append("filter")
+        .attr("id", "hdbar11-card-shadow")
+        .attr("x", "-8%")
+        .attr("y", "-10%")
+        .attr("width", "116%")
+        .attr("height", "124%");
+    filter.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 6)
+        .attr("stdDeviation", 8)
+        .attr("flood-color", "#6780ad")
+        .attr("flood-opacity", 0.18);
+
+    const makeGradient = (id, stops) => {
+        const grad = defs.append("linearGradient").attr("id", id).attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%");
+        stops.forEach(stop => grad.append("stop").attr("offset", stop.offset).attr("stop-color", stop.color).attr("stop-opacity", stop.opacity || 1));
+    };
+    makeGradient("hdbar11-blue-gradient", [
+        { offset: "0%", color: "#a8c8ff" },
+        { offset: "100%", color: leftColor }
+    ]);
+    makeGradient("hdbar11-gold-gradient", [
+        { offset: "0%", color: "#f4c257" },
+        { offset: "100%", color: "#d68d12" }
+    ]);
+
+    const makeHatch = (id, baseFill) => {
+        const pattern = defs.append("pattern")
+            .attr("id", id)
+            .attr("patternUnits", "userSpaceOnUse")
+            .attr("width", 7)
+            .attr("height", 7)
+            .attr("patternTransform", "rotate(45)");
+        pattern.append("rect").attr("width", 7).attr("height", 7).attr("fill", baseFill);
+        pattern.append("line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", 0)
+            .attr("y2", 7)
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 1.25)
+            .attr("opacity", 0.35);
+    };
+    makeHatch("hdbar11-blue-hatch", "url(#hdbar11-blue-gradient)");
+    makeHatch("hdbar11-gold-hatch", "url(#hdbar11-gold-gradient)");
+
+    const cardX = Math.max(6, width * 0.018);
+    const cardY = Math.max(6, height * 0.02);
+    const cardW = width - cardX * 2;
+    const cardH = height - cardY * 2;
+    const padX = Math.max(28, Math.min(48, width * 0.04));
+    const headerH = Math.max(58, Math.min(76, cardH * 0.16));
+    const rowTop = cardY + headerH + 18;
+    const rowBottom = cardY + cardH - 18;
+    const rowAreaH = Math.max(100, rowBottom - rowTop);
+    const rowStep = rowAreaH / dimensions.length;
+    const barH = Math.max(10, Math.min(22, rowStep * 0.42));
+    const chipR = Math.max(11, Math.min(18, rowStep * 0.34));
+    const centerX = width / 2;
+    const maxDimensionChars = d3.max(dimensions, d => String(dimensionUnit ? `${d}${dimensionUnit}` : d).length) || 1;
+    const compactCenterLabels = maxDimensionChars <= 4;
+    const centerGap = compactCenterLabels
+        ? chipR * 2 + Math.max(28, width * 0.034)
+        : Math.min(width * 0.22, Math.max(chipR * 2 + 44, maxDimensionChars * 6.6 + 30));
+    const centerChipW = compactCenterLabels ? chipR * 2 : Math.max(chipR * 2 + 20, centerGap - 22);
+    const labelW = Math.max(88, Math.min(118, width * 0.1));
+    const leftTrackX = cardX + padX + labelW + 10;
+    const leftTrackEnd = centerX - centerGap / 2;
+    const rightTrackX = centerX + centerGap / 2;
+    const rightLabelW = labelW;
+    const rightTrackEnd = cardX + cardW - padX - rightLabelW - 10;
+    const trackW = Math.max(36, Math.min(leftTrackEnd - leftTrackX, rightTrackEnd - rightTrackX));
+    const leftValueX = Math.max(cardX + padX + labelW - 8, leftTrackX - 20);
+    const rightValueX = Math.min(cardX + cardW - padX - rightLabelW + 8, rightTrackX + trackW + 20);
+    const labelFont = Math.max(11, Math.min(16, rowStep * 0.29));
+    const valueFont = Math.max(11, Math.min(17, rowStep * 0.34));
+
+    svg.append("rect")
+        .attr("class", "hdbar11-chart-card")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardW)
+        .attr("height", cardH)
+        .attr("rx", 14)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#e3e9f4")
+        .attr("stroke-width", 1)
+        .attr("filter", "url(#hdbar11-card-shadow)");
+
+    const headerY = cardY + Math.max(29, headerH * 0.58);
+    const leftHeaderX = cardX + padX + Math.max(118, Math.min(150, cardW * 0.2));
+    const rightHeaderX = cardX + cardW - padX - Math.max(118, Math.min(150, cardW * 0.2));
+
+    const groupLabel = group => {
+        let label = `${group}${groupUnit || ""}`.trim();
+        if (/developer/i.test(titleText) && !/developer/i.test(label)) label = `${label} Developers`;
+        return label.toUpperCase();
+    };
+
+    const addHeaderSlot = (x, y, side, color) => {
+        const slot = svg.append("g")
+            .attr("class", `hdbar11-header-icon-slot hdbar11-${side}-icon-slot`)
+            .attr("data-asset-slot", `${side}-group-icon`)
+            .attr("data-slot-policy", "neutral_placeholder")
+            .attr("data-slot-anchor", `${side}-group-header`)
+            .attr("data-slot-bbox", `${Math.round(x - 14)},${Math.round(y - 14)},28,28`)
+            .attr("data-slot-mask", "circle")
+            .attr("data-slot-collision", "inside-chart-card-header-row")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        slot.append("circle")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", 13)
+            .attr("fill", "#ffffff")
+            .attr("stroke", color)
+            .attr("stroke-width", 2);
+        slot.append("circle")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", 3.2)
+            .attr("fill", color)
+            .attr("opacity", 0.52);
+    };
+
+    addHeaderSlot(leftHeaderX - Math.max(84, Math.min(104, cardW * 0.14)), headerY - 1, "left", leftColor);
+    addHeaderSlot(rightHeaderX - Math.max(84, Math.min(104, cardW * 0.14)), headerY - 1, "right", rightColor);
+
+    svg.append("text")
+        .attr("x", leftHeaderX + 12)
+        .attr("y", headerY + 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family || "Arial")
+        .style("font-size", `${Math.max(11, Math.min(14, width * 0.018))}px`)
+        .style("font-weight", 800)
+        .style("fill", leftColor)
+        .text(groupLabel(leftGroup));
+
+    svg.append("text")
+        .attr("x", rightHeaderX + 16)
+        .attr("y", headerY + 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family || "Arial")
+        .style("font-size", `${Math.max(11, Math.min(14, width * 0.018))}px`)
+        .style("font-weight", 800)
+        .style("fill", rightColor)
+        .text(groupLabel(rightGroup));
+
+    svg.append("text")
+        .attr("x", centerX)
+        .attr("y", headerY + 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family || "Arial")
+        .style("font-size", `${Math.max(10, Math.min(13, width * 0.017))}px`)
+        .style("font-weight", 700)
+        .style("letter-spacing", "0")
+        .style("fill", "#202848")
+        .attr("textLength", String(dimensionField || "Category").length > 10 ? Math.min(centerGap - 12, 100) : null)
+        .attr("lengthAdjust", String(dimensionField || "Category").length > 10 ? "spacingAndGlyphs" : null)
+        .text(String(dimensionField || "Category").toUpperCase());
+
+    svg.append("line")
+        .attr("x1", cardX + padX)
+        .attr("x2", cardX + cardW - padX)
+        .attr("y1", cardY + headerH)
+        .attr("y2", cardY + headerH)
+        .attr("stroke", "#e2e7f0")
+        .attr("stroke-width", 1);
+
+    const leftByDimension = new Map(rawData.filter(d => d[groupField] === leftGroup).map(d => [d[dimensionField], d]));
+    const rightByDimension = new Map(rawData.filter(d => d[groupField] === rightGroup).map(d => [d[dimensionField], d]));
+    const leftMaxValue = d3.max([...leftByDimension.values()], d => +d[valueField] || 0) || maxValue;
+    const rightMaxValue = d3.max([...rightByDimension.values()], d => +d[valueField] || 0) || maxValue;
+
+    const formatDimension = value => dimensionUnit ? `${value}${dimensionUnit}` : `${value}`;
+    const formatValueParts = value => {
+        const numeric = +value || 0;
+        if (/usd|\$|dollar/i.test(valueUnit) && Math.abs(numeric) >= 1000) {
+            return { number: `${chartUtils.format.autoText(numeric / 1000)}K`, unit: "USD" };
+        }
+        const formatted = chartUtils.format.autoText(numeric);
+        return { number: formatted, unit: valueUnit };
+    };
+
+    const addValueLabel = (x, y, value, color, anchor) => {
+        const parts = formatValueParts(value);
+        const text = svg.append("text")
+            .attr("class", "hdbar11-value-label")
+            .attr("x", x)
+            .attr("y", y + 1)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", anchor)
+            .style("font-family", typography.annotation.font_family || "Arial")
+            .style("font-weight", 800)
+            .style("font-size", `${valueFont}px`)
+            .style("fill", color)
+            .attr("data-value", value)
+            .attr("data-label-anchor", "bar-outer-endpoint")
+            .attr("data-coordinate-rule", "attached-row-centerline");
+        text.append("tspan").text(parts.number);
+        if (parts.unit) {
+            text.append("tspan")
+                .style("font-size", `${Math.max(8, valueFont * 0.58)}px`)
+                .style("font-weight", 700)
+                .attr("dx", 3)
+                .text(parts.unit);
+        }
+    };
+
+    dimensions.forEach((dimension, index) => {
+        const rowCenterY = rowTop + index * rowStep + rowStep / 2;
+        const guideY = rowTop + index * rowStep;
+        const leftDatum = leftByDimension.get(dimension);
+        const rightDatum = rightByDimension.get(dimension);
+        const leftValue = +leftDatum[valueField] || 0;
+        const rightValue = +rightDatum[valueField] || 0;
+        const leftBarW = Math.max(3, trackW * Math.min(1, 0.38 + 0.62 * Math.sqrt(Math.max(0, leftValue) / leftMaxValue)));
+        const rightBarW = Math.max(3, trackW * Math.min(1, 0.30 + 0.70 * Math.sqrt(Math.max(0, rightValue) / rightMaxValue)));
+        const leftBarX = leftTrackX;
+        const rightBarX = rightTrackX;
+        const barY = rowCenterY - barH / 2;
+        const radius = barH / 2;
+
+        svg.append("line")
+            .attr("class", "hdbar11-row-guide")
+            .attr("x1", cardX + padX)
+            .attr("x2", cardX + cardW - padX)
+            .attr("y1", guideY)
+            .attr("y2", guideY)
+            .attr("stroke", "#e4eaf4")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", index % 2 === 0 ? "3 3" : null)
+            .attr("opacity", 0.86);
+
+        svg.append("rect")
+            .attr("class", "hdbar11-left-track")
+            .attr("x", leftTrackX)
+            .attr("y", barY)
+            .attr("width", trackW)
+            .attr("height", barH)
+            .attr("rx", radius)
+            .attr("fill", leftLight);
+        svg.append("rect")
+            .attr("class", "hdbar11-right-track")
+            .attr("x", rightTrackX)
+            .attr("y", barY)
+            .attr("width", trackW)
+            .attr("height", barH)
+            .attr("rx", radius)
+            .attr("fill", rightLight);
+
+        svg.append("rect")
+            .attr("class", "hdbar11-bar hdbar11-left-bar")
+            .attr("x", leftBarX)
+            .attr("y", barY)
+            .attr("width", leftBarW)
+            .attr("height", barH)
+            .attr("rx", radius)
+            .attr("fill", "url(#hdbar11-blue-hatch)")
+            .attr("data-category", dimension)
+            .attr("data-group", leftGroup)
+            .attr("data-value", leftValue)
+            .attr("data-endpoint-shape", "rounded-pill-like")
+            .attr("data-coordinate-rule", "row-centerline-left-of-center-chip");
+        svg.append("rect")
+            .attr("class", "hdbar11-bar hdbar11-right-bar")
+            .attr("x", rightBarX)
+            .attr("y", barY)
+            .attr("width", rightBarW)
+            .attr("height", barH)
+            .attr("rx", radius)
+            .attr("fill", "url(#hdbar11-gold-hatch)")
+            .attr("data-category", dimension)
+            .attr("data-group", rightGroup)
+            .attr("data-value", rightValue)
+            .attr("data-endpoint-shape", "rounded-pill-like")
+            .attr("data-coordinate-rule", "row-centerline-right-of-center-chip");
+
+        if (compactCenterLabels) {
+            svg.append("circle")
+                .attr("class", "hdbar11-center-chip")
+                .attr("cx", centerX)
+                .attr("cy", rowCenterY)
+                .attr("r", chipR)
+                .attr("fill", "#ffffff")
+                .attr("stroke", "#dbe3ef")
+                .attr("stroke-width", 1)
+                .attr("filter", "url(#hdbar11-card-shadow)")
+                .attr("data-coordinate-rule", "centerline-aligned")
+                .attr("data-category", dimension);
+        } else {
+            svg.append("rect")
+                .attr("class", "hdbar11-center-chip hdbar11-center-chip-pill")
+                .attr("x", centerX - centerChipW / 2)
+                .attr("y", rowCenterY - chipR)
+                .attr("width", centerChipW)
+                .attr("height", chipR * 2)
+                .attr("rx", chipR)
+                .attr("fill", "#ffffff")
+                .attr("stroke", "#dbe3ef")
+                .attr("stroke-width", 1)
+                .attr("filter", "url(#hdbar11-card-shadow)")
+                .attr("data-coordinate-rule", "centerline-aligned-pill")
+                .attr("data-category", dimension);
+        }
+        const formattedDimension = formatDimension(dimension);
+        const dimensionSafeWidth = centerChipW - 9;
+        const needsFit = formattedDimension.length * labelFont * 0.56 > dimensionSafeWidth;
+        svg.append("text")
+            .attr("class", "hdbar11-center-chip-label")
+            .attr("x", centerX)
+            .attr("y", rowCenterY + 1)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family || "Arial")
+            .style("font-size", `${labelFont}px`)
+            .style("font-weight", 800)
+            .style("fill", textColor)
+            .attr("textLength", needsFit ? dimensionSafeWidth : null)
+            .attr("lengthAdjust", needsFit ? "spacingAndGlyphs" : null)
+            .text(formattedDimension);
+
+        addValueLabel(leftValueX, rowCenterY, leftValue, leftColor, "end");
+        addValueLabel(rightValueX, rowCenterY, rightValue, rightColor, "start");
+    });
+
+    svg.append("line")
+        .attr("class", "hdbar11-center-divider")
+        .attr("x1", centerX)
+        .attr("x2", centerX)
+        .attr("y1", rowTop - 4)
+        .attr("y2", rowBottom + 2)
+        .attr("stroke", "#d7deea")
+        .attr("stroke-width", 1.1)
+        .attr("stroke-dasharray", "2 6")
+        .attr("opacity", 0.8)
+        .lower();
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_diverging_bar_chart_12.js

@@ -0,0 +1,596 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Diverging Bar Chart",
+    "chart_name": "horizontal_diverging_bar_chart_12",
+    "chart_for": "comparison",
+    "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": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "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": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const columns = (jsonData.data && jsonData.data.columns) || [];
+    const colorResolver = chartUtils.color.resolver(jsonData);
+
+    d3.select(containerSelector).html("");
+
+    const width = variables.width || 1024;
+    const height = variables.height || 1536;
+    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 defs = svg.append("defs");
+    defs.append("linearGradient")
+        .attr("id", "hd12-bg")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%")
+        .call(g => {
+            g.append("stop").attr("offset", "0%").attr("stop-color", "#fbfff8");
+            g.append("stop").attr("offset", "62%").attr("stop-color", "#ffffff");
+            g.append("stop").attr("offset", "100%").attr("stop-color", "#f4f7ef");
+        });
+    defs.append("linearGradient")
+        .attr("id", "hd12-left-grad")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%")
+        .call(g => {
+            g.append("stop").attr("offset", "0%").attr("stop-color", "#7fbd2f");
+            g.append("stop").attr("offset", "100%").attr("stop-color", "#2d7f20");
+        });
+    defs.append("linearGradient")
+        .attr("id", "hd12-right-grad")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%")
+        .call(g => {
+            g.append("stop").attr("offset", "0%").attr("stop-color", "#0f74d7");
+            g.append("stop").attr("offset", "100%").attr("stop-color", "#074aa9");
+        });
+    const shadow = defs.append("filter")
+        .attr("id", "hd12-soft-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#24420e")
+        .attr("flood-opacity", 0.11);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#hd12-bg)");
+
+    const channel = (name, fallbackIndex) => {
+        try {
+            const resolved = chartUtils.schema.channel(jsonData, name);
+            if (resolved && resolved.key) return resolved;
+        } catch (e) {}
+        const col = columns[fallbackIndex] || {};
+        return { key: col.name, unit: col.unit || "" };
+    };
+    const dimensionChannel = channel("x", 0);
+    const valueChannel = channel("y", 1);
+    const groupChannel = channel("group", 2);
+    const dimensionField = dimensionChannel.key;
+    const valueField = valueChannel.key;
+    const groupField = groupChannel.key;
+    const valueUnit = valueChannel.unit && valueChannel.unit !== "none" ? valueChannel.unit : "";
+
+    const groups = Array.from(new Set(chartData.map(d => d[groupField]))).slice(0, 2);
+    const leftGroup = groups[0] || "Group A";
+    const rightGroup = groups[1] || "Group B";
+    const dimensionsInInput = Array.from(new Set(chartData.map(d => d[dimensionField])));
+    const temporalNames = ["year", "date", "month", "season", "semester", "quarter", "time"];
+    const dimensionName = String(dimensionField || "").toLowerCase();
+    const dimensionColumn = columns.find(c => c.name === dimensionField) || {};
+    const isTemporal = temporalNames.some(token => dimensionName.includes(token)) ||
+        String(dimensionColumn.data_type || "").toLowerCase().includes("temporal");
+    const monthIndex = {
+        jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+        may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8, sep: 9,
+        sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11,
+        dec: 12, december: 12
+    };
+    const temporalKey = (value) => {
+        if (typeof value === "number") return value;
+        const raw = String(value || "").trim();
+        const numeric = Number(raw.replace(/[^0-9.-]/g, ""));
+        if (!Number.isNaN(numeric) && raw.match(/[0-9]/)) return numeric;
+        return monthIndex[raw.toLowerCase()] || raw.toLowerCase();
+    };
+    const dimensions = isTemporal
+        ? dimensionsInInput.slice().sort((a, b) => d3.ascending(temporalKey(a), temporalKey(b)))
+        : dimensionsInInput.slice();
+
+    const rows = dimensions.map(dimension => {
+        const left = chartData.find(d => d[dimensionField] === dimension && d[groupField] === leftGroup);
+        const right = chartData.find(d => d[dimensionField] === dimension && d[groupField] === rightGroup);
+        return {
+            dimension,
+            left,
+            right,
+            leftValue: left ? Math.abs(+left[valueField]) || 0 : 0,
+            rightValue: right ? Math.abs(+right[valueField]) || 0 : 0
+        };
+    });
+    const leftMax = d3.max(rows, d => d.leftValue) || 1;
+    const rightMax = d3.max(rows, d => d.rightValue) || 1;
+
+    const getGroupColor = (group, index, fallback) => {
+        try {
+            return colorResolver.field(group, index, { fallbackKey: "primary" }).value || fallback;
+        } catch (e) {
+            return fallback;
+        }
+    };
+    const leftColor = getGroupColor(leftGroup, 0, "#4e9a1d");
+    const rightColor = getGroupColor(rightGroup, 1, "#0b63c7");
+    const titleDark = "#082746";
+    const greenDark = "#185d20";
+    const mutedText = "#3f4a48";
+
+    const formatValue = (value) => {
+        if (!Number.isFinite(value)) return "";
+        let text;
+        if (valueUnit === "$") {
+            const absValue = Math.abs(value);
+            if (absValue >= 1000000) {
+                text = `${(value / 1000000).toFixed(value % 1000000 === 0 ? 0 : 1)}M`;
+            } else if (absValue >= 1000) {
+                text = `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`;
+            } else {
+                text = Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, "");
+            }
+            return `$${text}`;
+        }
+        if (valueUnit === "%") {
+            text = Math.abs(value % 1) > 0.001 ? value.toFixed(1) : value.toFixed(0);
+            return `${text}%`;
+        }
+        if (valueUnit.toLowerCase() === "ppm") {
+            text = value < 0.1 ? value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "") : value.toFixed(2);
+            return `${text} ppm`;
+        }
+        if (Number.isInteger(value)) {
+            text = String(value);
+        } else if (Math.abs(value) < 1) {
+            text = value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+        } else {
+            text = value.toFixed(1).replace(/\.0$/, "");
+        }
+        return valueUnit ? `${text}${valueUnit}` : text;
+    };
+
+    const wrapWords = (text, maxChars, maxLines) => {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const next = line ? `${line} ${word}` : word;
+            if (next.length > maxChars && line) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = next;
+            }
+        });
+        if (line) lines.push(line);
+        if (maxLines && lines.length > maxLines) {
+            const clipped = lines.slice(0, maxLines);
+            clipped[maxLines - 1] = clipped[maxLines - 1].replace(/\s+\S+$/, "");
+            return clipped;
+        }
+        return lines;
+    };
+
+    const titleSource = (jsonData.titles && jsonData.titles.main_title) ||
+        (jsonData.metadata && jsonData.metadata.title) || "Diverging Comparison";
+    const subtitleSource = (jsonData.titles && jsonData.titles.sub_title) ||
+        (jsonData.metadata && jsonData.metadata.description) || "";
+    const hasSplit = titleSource.toLowerCase().indexOf(" has ");
+    const kicker = hasSplit > 0 ? titleSource.slice(0, hasSplit) : wrapWords(titleSource, 28, 1)[0];
+    const displayTitle = hasSplit > 0 ? titleSource.slice(hasSplit + 1) : titleSource.replace(kicker, "").trim() || titleSource;
+    const titleLines = wrapWords(displayTitle, 22, 2);
+    const subtitleLines = wrapWords(subtitleSource, 52, 4);
+
+    const centerX = width / 2;
+    const page = svg.append("g").attr("class", "hd12-page");
+
+    page.append("rect")
+        .attr("x", 194)
+        .attr("y", 42)
+        .attr("width", 636)
+        .attr("height", 50)
+        .attr("rx", 25)
+        .attr("fill", "#0c6a35");
+    page.append("text")
+        .attr("x", centerX)
+        .attr("y", 76)
+        .attr("text-anchor", "middle")
+        .attr("font-family", "Arial, sans-serif")
+        .attr("font-size", 24)
+        .attr("font-weight", 800)
+        .attr("letter-spacing", 3)
+        .attr("fill", "#ffffff")
+        .text(String(kicker || "").toUpperCase());
+
+    const titleY = 142;
+    titleLines.forEach((line, i) => {
+        page.append("text")
+            .attr("x", 370)
+            .attr("y", titleY + i * 70)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Georgia, 'Times New Roman', serif")
+            .attr("font-size", titleLines.length > 1 ? 64 : 72)
+            .attr("font-weight", 800)
+            .attr("fill", i === 0 ? titleDark : greenDark)
+            .text(line);
+    });
+
+    const dividerY = titleY + titleLines.length * 70 + 22;
+    page.append("line").attr("x1", 282).attr("x2", 470).attr("y1", dividerY).attr("y2", dividerY)
+        .attr("stroke", "#6ea448").attr("stroke-width", 2);
+    page.append("line").attr("x1", 554).attr("x2", 742).attr("y1", dividerY).attr("y2", dividerY)
+        .attr("stroke", "#6ea448").attr("stroke-width", 2);
+    page.append("circle").attr("cx", centerX).attr("cy", dividerY).attr("r", 10).attr("fill", "#5d9d35").attr("opacity", 0.9);
+
+    const subtitleY = dividerY + 52;
+    subtitleLines.forEach((line, i) => {
+        page.append("text")
+            .attr("x", centerX)
+            .attr("y", subtitleY + i * 36)
+            .attr("text-anchor", "middle")
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", 23)
+            .attr("font-weight", 500)
+            .attr("fill", mutedText)
+            .text(line);
+    });
+
+    const headerSlot = page.append("g")
+        .attr("class", "reserved-asset-slot hd12-header-topic-art-slot")
+        .attr("data-asset-slot", "header-topic-art")
+        .attr("data-reserved-slot", "header_topic_art")
+        .attr("data-slot-policy", "image2_asset")
+        .attr("data-asset-source-policy", "image2-generated")
+        .attr("data-anchor", "upper-right-header-safe-area")
+        .attr("data-bbox", "842 266 126 126")
+        .attr("data-collision-rule", "stay-right-of-title-and-above-legend-table;shrink-or-hide-for-long-title")
+        .attr("data-mask", "rounded-rect")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("transform", "translate(842,266)");
+    headerSlot.append("rect")
+        .attr("width", 126)
+        .attr("height", 126)
+        .attr("rx", 32)
+        .attr("fill", "#eaf5df")
+        .attr("stroke", "#9ac56d")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "8 8")
+        .attr("opacity", 0.62);
+    headerSlot.append("circle").attr("cx", 45).attr("cy", 68).attr("r", 30).attr("fill", "#77aa43").attr("opacity", 0.18);
+    headerSlot.append("rect").attr("x", 78).attr("y", 42).attr("width", 30).attr("height", 56).attr("rx", 12).attr("fill", "#245f2b").attr("opacity", 0.12);
+
+    const legendX = 104;
+    const legendY = 470;
+    const legendW = 816;
+    const legendH = 86;
+    page.append("rect")
+        .attr("x", legendX)
+        .attr("y", legendY)
+        .attr("width", legendW)
+        .attr("height", legendH)
+        .attr("rx", 24)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#d9e4d5")
+        .attr("stroke-width", 1.4)
+        .attr("filter", "url(#hd12-soft-shadow)");
+    page.append("line")
+        .attr("x1", legendX + legendW / 2)
+        .attr("x2", legendX + legendW / 2)
+        .attr("y1", legendY + 18)
+        .attr("y2", legendY + legendH - 18)
+        .attr("stroke", "#c8d3d2")
+        .attr("stroke-width", 1.5);
+
+    const drawLegendItem = (x, group, color, slotName) => {
+        const item = page.append("g").attr("transform", `translate(${x},${legendY + legendH / 2})`);
+        const slot = item.append("g")
+            .attr("class", "reserved-asset-slot hd12-legend-group-icon-slot")
+            .attr("data-asset-slot", "legend-group-icon")
+            .attr("data-reserved-slot", slotName)
+            .attr("data-slot-policy", "neutral_placeholder")
+            .attr("data-asset-source-policy", "neutral-placeholder")
+            .attr("data-anchor", `legend-${slotName}`)
+            .attr("data-bbox", `${x - 28} ${legendY + 17} 56 52`)
+            .attr("data-collision-rule", "stay-inside-legend-card-and-avoid-label")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        slot.append("circle").attr("r", 25).attr("fill", color).attr("opacity", 0.18);
+        slot.append("circle").attr("r", 18).attr("fill", color).attr("opacity", 0.9);
+        item.append("text")
+            .attr("x", 46)
+            .attr("y", -4)
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", 22)
+            .attr("font-weight", 800)
+            .attr("fill", titleDark)
+            .text(group);
+        item.append("text")
+            .attr("x", 46)
+            .attr("y", 25)
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", 17)
+            .attr("fill", "#4a5552")
+            .text(valueUnit ? `(${valueUnit})` : "value");
+    };
+    drawLegendItem(148, leftGroup, leftColor, "legend_left_group_icon");
+    drawLegendItem(562, rightGroup, rightColor, "legend_right_group_icon");
+
+    const tableX = 64;
+    const tableY = 625;
+    const tableW = 896;
+    const tableH = Math.min(850, height - tableY - 92);
+    const headerH = 60;
+    const rowH = (tableH - headerH) / Math.max(rows.length, 1);
+    const dimW = 270;
+    const leftW = 345;
+    const rightW = tableW - dimW - leftW;
+    const leftX = tableX + dimW;
+    const rightX = leftX + leftW;
+
+    page.append("rect")
+        .attr("x", tableX)
+        .attr("y", tableY)
+        .attr("width", tableW)
+        .attr("height", tableH)
+        .attr("rx", 20)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#c8d8c8")
+        .attr("stroke-width", 1.4)
+        .attr("filter", "url(#hd12-soft-shadow)");
+    page.append("clipPath")
+        .attr("id", "hd12-table-clip")
+        .append("rect")
+        .attr("x", tableX)
+        .attr("y", tableY)
+        .attr("width", tableW)
+        .attr("height", tableH)
+        .attr("rx", 20);
+    const table = page.append("g").attr("clip-path", "url(#hd12-table-clip)");
+    table.append("rect").attr("x", tableX).attr("y", tableY).attr("width", dimW).attr("height", headerH).attr("fill", "#06482f");
+    table.append("rect").attr("x", leftX).attr("y", tableY).attr("width", leftW).attr("height", headerH).attr("fill", "#0b5c30");
+    table.append("rect").attr("x", rightX).attr("y", tableY).attr("width", rightW).attr("height", headerH).attr("fill", "#075f9f");
+
+    const headerText = (x, y, text, anchor) => {
+        table.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", anchor || "middle")
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", 19)
+            .attr("font-weight", 800)
+            .attr("letter-spacing", 1.2)
+            .attr("fill", "#ffffff")
+            .text(text);
+    };
+    const groupHeaderText = (x, group) => {
+        const groupLines = wrapWords(String(group).toUpperCase(), 22, 2);
+        groupLines.forEach((line, index) => {
+            table.append("text")
+                .attr("x", x)
+                .attr("y", tableY + 25 + index * 19)
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, sans-serif")
+                .attr("font-size", 17)
+                .attr("font-weight", 800)
+                .attr("letter-spacing", 0.8)
+                .attr("fill", "#ffffff")
+                .text(line);
+        });
+        if (valueUnit) {
+            table.append("text")
+                .attr("x", x)
+                .attr("y", tableY + 52)
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, sans-serif")
+                .attr("font-size", 14)
+                .attr("font-weight", 700)
+                .attr("fill", "#dbeee0")
+                .text(`(${valueUnit})`);
+        }
+    };
+    headerText(tableX + dimW / 2, tableY + 38, String(dimensionField || "State").toUpperCase());
+    groupHeaderText(leftX + leftW / 2, leftGroup);
+    groupHeaderText(rightX + rightW / 2, rightGroup);
+
+    [leftX, rightX].forEach(x => {
+        table.append("line")
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", tableY)
+            .attr("y2", tableY + tableH)
+            .attr("stroke", "#d9e2da")
+            .attr("stroke-width", 1.2);
+    });
+
+    const barH = Math.max(16, Math.min(28, rowH * 0.34));
+    const leftBarX = leftX + 26;
+    const leftBarMaxW = leftW - 165;
+    const rightBarX = rightX + 25;
+    const rightBarMaxW = rightW - 220;
+    const labelFont = rowH < 58 ? 18 : 22;
+    const valueFont = rowH < 58 ? 16 : 21;
+
+    rows.forEach((row, i) => {
+        const rowY = tableY + headerH + i * rowH;
+        const rowCenter = rowY + rowH / 2;
+        table.append("rect")
+            .attr("x", tableX)
+            .attr("y", rowY)
+            .attr("width", tableW)
+            .attr("height", rowH)
+            .attr("fill", i % 2 === 0 ? "#fbfdf8" : "#ffffff");
+        table.append("line")
+            .attr("x1", tableX)
+            .attr("x2", tableX + tableW)
+            .attr("y1", rowY)
+            .attr("y2", rowY)
+            .attr("stroke", "#dfe7db")
+            .attr("stroke-width", 1);
+
+        const slot = table.append("g")
+            .attr("class", "reserved-asset-slot hd12-row-topic-icon-slot")
+            .attr("data-asset-slot", "row-topic-icon")
+            .attr("data-reserved-slot", `row_topic_icon_${i + 1}`)
+            .attr("data-slot-policy", "image2_asset")
+            .attr("data-asset-source-policy", "image2-generated")
+            .attr("data-anchor", `row-${i + 1}-centerline`)
+            .attr("data-bbox", `${tableX + 30} ${rowCenter - 27} 54 54`)
+            .attr("data-collision-rule", "stay-inside-dimension-column-and-avoid-label-text")
+            .attr("data-mask", "circle")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("transform", `translate(${tableX + 57},${rowCenter})`);
+        slot.append("circle").attr("r", 27).attr("fill", i % 2 === 0 ? "#e3f2cd" : "#e5f4f8");
+        slot.append("circle").attr("r", 16).attr("fill", i % 2 === 0 ? "#7ab546" : "#5ba4bd").attr("opacity", 0.18);
+
+        const dimLabel = String(row.dimension);
+        const dimLines = wrapWords(dimLabel, rowH < 58 ? 14 : 16, 2);
+        dimLines.forEach((line, lineIndex) => {
+            table.append("text")
+                .attr("x", tableX + 104)
+                .attr("y", rowCenter + (lineIndex - (dimLines.length - 1) / 2) * (labelFont + 2) + 7)
+                .attr("font-family", "Arial, sans-serif")
+                .attr("font-size", labelFont)
+                .attr("font-weight", 800)
+                .attr("fill", titleDark)
+                .text(line);
+        });
+
+        const leftWValue = Math.max(10, (row.leftValue / leftMax) * leftBarMaxW);
+        const rightWValue = Math.max(10, (row.rightValue / rightMax) * rightBarMaxW);
+        const leftY = rowCenter - barH / 2;
+        const rx = Math.min(12, barH / 2);
+
+        table.append("rect")
+            .attr("x", leftBarX)
+            .attr("y", leftY)
+            .attr("width", leftWValue)
+            .attr("height", barH)
+            .attr("rx", rx)
+            .attr("ry", rx)
+            .attr("fill", "url(#hd12-left-grad)");
+        table.append("text")
+            .attr("x", Math.min(leftBarX + leftWValue + 16, leftX + leftW - 120))
+            .attr("y", rowCenter + 7)
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", valueFont)
+            .attr("font-weight", 800)
+            .attr("fill", "#2c7a13")
+            .text(formatValue(row.leftValue));
+
+        table.append("rect")
+            .attr("x", rightBarX)
+            .attr("y", leftY)
+            .attr("width", rightWValue)
+            .attr("height", barH)
+            .attr("rx", rx)
+            .attr("ry", rx)
+            .attr("fill", "url(#hd12-right-grad)");
+        table.append("text")
+            .attr("x", Math.min(rightBarX + rightWValue + 18, tableX + tableW - 155))
+            .attr("y", rowCenter + 7)
+            .attr("font-family", "Arial, sans-serif")
+            .attr("font-size", valueFont)
+            .attr("font-weight", 800)
+            .attr("fill", "#075fbd")
+            .text(formatValue(row.rightValue));
+
+        if (row.leftValue === leftMax || row.rightValue === rightMax) {
+            const isLeft = row.leftValue === leftMax;
+            const badgeX = isLeft ? leftX + leftW - 8 : tableX + tableW - 34;
+            const badgeColor = isLeft ? "#0d7140" : "#0a67c7";
+            const badge = table.append("g")
+                .attr("class", "hd12-max-value-badge")
+                .attr("data-annotation", "max-value")
+                .attr("data-group", isLeft ? leftGroup : rightGroup)
+                .attr("data-dimension", row.dimension)
+                .attr("data-anchor", "row-centerline-value-end")
+                .attr("data-collision-rule", "clamp-inside-table-edge-and-avoid-value-label")
+                .attr("transform", `translate(${badgeX},${rowCenter})`);
+            badge.append("rect")
+                .attr("x", -14)
+                .attr("y", -14)
+                .attr("width", 28)
+                .attr("height", 28)
+                .attr("rx", 6)
+                .attr("fill", badgeColor);
+            badge.append("text")
+                .attr("x", 0)
+                .attr("y", 7)
+                .attr("text-anchor", "middle")
+                .attr("font-family", "Arial, sans-serif")
+                .attr("font-size", 18)
+                .attr("font-weight", 900)
+                .attr("fill", "#ffffff")
+                .attr("data-chart-native-marker", "max")
+                .text("★");
+        }
+    });
+
+    table.append("line")
+        .attr("x1", tableX)
+        .attr("x2", tableX + tableW)
+        .attr("y1", tableY + tableH)
+        .attr("y2", tableY + tableH)
+        .attr("stroke", "#c8d8c8")
+        .attr("stroke-width", 1.4);
+
+    page.append("text")
+        .attr("x", centerX)
+        .attr("y", height - 42)
+        .attr("text-anchor", "middle")
+        .attr("font-family", "Arial, sans-serif")
+        .attr("font-size", 14)
+        .attr("fill", "#8b968d")
+        .attr("data-ignored-bottom-wrapper", "takeaway-source-footer-omitted")
+        .text("");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_06.js

@@ -0,0 +1,345 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_06",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 5]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "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": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js   horizontal_split_bar_chart_06
+function makeChart(containerSelector, 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: "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" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 100,      // 顶部留出标题空间
+        right: 30,    // 右侧足够显示数值
+        bottom: 60,   // 底部边距
+        left: 60     // 左侧初始空间，用于维度标签和图标
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit; 
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 添加数值格式化函数
+    
+    // 获取唯一维度值和分组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 不对数据进行排序，使用原始顺序
+    
+    // ---------- 5. 计算标签宽度 ----------
+    
+    // 创建临时SVG来测量文本宽度
+    const tempSvg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("visibility", "hidden");
+    
+    // 初始填充值（会根据barHeight动态调整）
+    // const flagPadding = 5; // 不再需要图标填充
+    
+    // 计算最大维度标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（附加单位，如果有）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        const totalWidth = textWidth; // 只考虑文本宽度
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // ��算最大数值标签宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${chartUtils.format.autoText(+d[valueField])}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedValue, {
+            fontFamily: typography.annotation.font_family,
+            fontSize: typography.annotation.font_size,
+            fontWeight: typography.annotation.font_weight
+        }).width;
+        
+        maxValueWidth = Math.max(maxValueWidth, textWidth);
+    });
+    // 删除临时SVG
+    tempSvg.remove();
+    
+    // 根据标签宽度调整左边距（添加一些边距）
+    margin.left = Math.max(margin.left, maxLabelWidth + 20);
+    margin.right = Math.max(margin.right, maxValueWidth + 20);
+    
+    // 计算内部绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 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");
+    
+    // 添加defs用于视觉效果
+    const defs = svg.append("defs");
+    
+    // 创建斜线纹理模式
+    const patternDensity = 6; // 固定斜线密度
+    const patternStrokeWidth = 1.5; // 固定斜线宽度
+    groups.forEach((group, i) => {
+        // 为每个组获取颜色
+        const groupColor = colorResolver.field(group, i, { palette: "category10" }).value;
+        
+        // 创建斜线纹理模式
+        const patternId = `pattern-${group.replace(/\\s+/g, '-')}-${i}`; // 确保 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 barPadding = 0.1; // 设置固定边距
+    
+    // Y轴比例尺（用于维度）- 使用原始顺序
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(barPadding);
+    
+    // X轴比例尺（用于数值）
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[valueField])])
+        .range([0, innerWidth]);
+    
+    // 颜色比例尺（用于组）
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+    chartUtils.legend.centered(svg, groups, {
+        colorScale,
+        colorResolver,
+        colors,
+    }, width / 2, margin.top / 2, {
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: legendPadding,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // ---------- 12. 为每个维度绘制分组条形 ----------
+    
+    dimensions.forEach(dimension => {
+        // 获取此维度下的所有数据点
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const barHeight = yScale.bandwidth();
+            
+            
+            const labelY = yScale(dimension) + barHeight / 2;
+            
+            // 添加维度标签
+            g.append("text")
+                // .attr("x", flagX - 5) // 旧的基于图标位置的 X 坐标
+                .attr("x", -10) // 设置新的 X 坐标，例如在 Y 轴左侧 10px 处
+                .attr("y", labelY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(dimension);
+            
+            // 计算每个组的条形高度
+            const groupBarHeight = barHeight / groups.length;
+            
+            // 固定圆角半径
+            const cornerRadius = 3; 
+
+            // 绘制每个组的条形
+            groups.forEach((group, groupIndex) => {
+                // 找到此维度和此组的数据点
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                
+                if (dataPoint) {
+                    const value = +dataPoint[valueField];
+                    const barWidth = xScale(value);
+                    
+                    // 计算垂直位置 - 这里是关键修改，确保条形不重叠
+                    const groupY = yScale(dimension) + (groupIndex * groupBarHeight);
+                    
+                    // 绘制条形 - 使用 path 实现右侧圆角
+                    let pathData;
+                    // 仅在条形足够宽和高时应用圆角
+                    if (barWidth >= cornerRadius && groupBarHeight >= 2 * cornerRadius) {
+                        pathData = `
+                            M 0,${groupY} 
+                            L ${barWidth - cornerRadius},${groupY} 
+                            A ${cornerRadius},${cornerRadius} 0 0 1 ${barWidth},${groupY + cornerRadius} 
+                            L ${barWidth},${groupY + groupBarHeight - cornerRadius} 
+                            A ${cornerRadius},${cornerRadius} 0 0 1 ${barWidth - cornerRadius},${groupY + groupBarHeight} 
+                            L 0,${groupY + groupBarHeight} 
+                            Z
+                        `;
+                    } else {
+                        // 对于太窄或太矮的条形，绘制普通矩形
+                        pathData = `
+                            M 0,${groupY} 
+                            L ${barWidth},${groupY} 
+                            L ${barWidth},${groupY + groupBarHeight} 
+                            L 0,${groupY + groupBarHeight} 
+                            Z
+                        `;
+                    }
+
+                    const bar = g.append("path") // 使用 path 替代 rect
+                        .attr("d", pathData)
+                        .on("mouseover", function() {
+                            d3.select(this).attr("opacity", 0.8);
+                        })
+                        .on("mouseout", function() {
+                            d3.select(this).attr("opacity", 1);
+                        });
+                    
+                   
+
+                    // 应用填充：始终使用纹理
+                    const patternIdBar = `pattern-${group.replace(/\\s+/g, '-')}-${groupIndex}`;
+                    bar.attr("fill", `url(#${patternIdBar})`);
+                    
+                    // 添加数值标签
+                    const formattedValue = valueUnit ? 
+                        `${chartUtils.format.autoText(value)}${valueUnit}` : 
+                        `${chartUtils.format.autoText(value)}`;
+                    
+                    g.append("text")
+                        .attr("x", barWidth + 5)
+                        .attr("y", groupY + groupBarHeight / 2)
+                        .attr("dy", "0.35em")
+                        .attr("text-anchor", "start")
+                        .style("font-family", typography.annotation.font_family)
+                        .style("font-size", `${Math.max(groupBarHeight * 0.5, parseFloat(typography.annotation.font_size))}px`)
+                        .style("font-weight", typography.annotation.font_weight)
+                        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                        .text(formattedValue);
+                }
+            });
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_07.js

@@ -0,0 +1,433 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_07",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2,5]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "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": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js - 胶囊数量表示数值
+function makeChart(containerSelector, 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: "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" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值 - 圆角始终启用
+    // variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow !== undefined ? variables.has_shadow : false;
+    variables.has_gradient = variables.has_gradient !== undefined ? variables.has_gradient : false; // 虽然不用渐变填充，但保留效果选项
+    variables.has_stroke = variables.has_stroke !== undefined ? variables.has_stroke : false;
+    variables.has_spacing = variables.has_spacing !== undefined ? variables.has_spacing : true; // 胶囊间需要间距
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距 - 右侧需要重新计算
+    const margin = {
+        top: 100,      // 顶部留出标题空间
+        right: 30,    // 初始右侧边距，稍后调整
+        bottom: 60,   // 底部边距
+        left: 60     // 左侧初始空间，用于维度标签和图标
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit; 
+    }
+    
+    // ---------- 4. 数据处理与值缩放 ----------
+    
+    // 获取唯一维度值和分组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 找出最大值，以确定胶囊数量
+    const overallMax = d3.max(chartData, d => Math.abs(+d[valueField])) || 0;
+    
+    // 胶囊数量计算
+    const maxCapsules = 30; // 每组最多显示30个胶囊
+    // 计算每个胶囊代表的数值（处理 overallMax 为 0 的情况）
+    const valuePerCapsule = overallMax > 0 ? Math.ceil(overallMax / maxCapsules) : 1;
+    
+    // 计算值到胶囊数量的映射函数
+    const valueToCapsules = (value) => {
+        if (valuePerCapsule === 0) return 0; // 避免除以零
+        return Math.min(maxCapsules, Math.ceil(Math.abs(value) / valuePerCapsule));
+    };
+
+    // 添加数值格式化函数
+    
+    // ---------- 5. 计算标签与布局 ----------
+    
+    // 图标和胶囊尺寸配置
+    const iconSizeRatio = 0.6; // 图标高度占维度带宽的比例
+    const maxIconSize = 25;    // 图标最大尺寸
+    const iconPadding = 5;     // 图标和标签/胶囊之间的间距
+    const capsuleWidth = 5;    // 单个胶囊宽度
+    const capsuleSpacing = 2;  // 胶囊之间的间距
+    const labelMeasureOptions = {
+        fontFamily: typography.label.font_family,
+        fontSize: typography.label.font_size,
+        fontWeight: typography.label.font_weight
+    };
+    const annotationMeasureOptions = {
+        fontFamily: typography.annotation.font_family,
+        fontSize: typography.annotation.font_size,
+        fontWeight: typography.annotation.font_weight
+    };
+    
+    // 计算最大维度标签宽度
+    let maxDimLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        const formattedDimension = dimensionUnit ? `${dimension}${dimensionUnit}` : `${dimension}`;
+        const textWidth = chartUtils.text.measure(null, formattedDimension, labelMeasureOptions).width;
+        maxDimLabelWidth = Math.max(maxDimLabelWidth, textWidth);
+    });
+    
+    // 计算最大数值标签宽度 (基于最大可能值和单位)
+    let maxValueLabelWidth = 0;
+    const maxPossibleValue = overallMax;
+    // 使用 formatValue 和 valueUnit 来计算最大值标签宽度
+    const formattedMaxValueWithUnit = `${chartUtils.format.autoText(maxPossibleValue)}${valueUnit}`;
+    maxValueLabelWidth = chartUtils.text.measure(null, formattedMaxValueWithUnit, annotationMeasureOptions).width;
+    
+    // 计算图例项宽度和总宽度
+    const legendItemWidths = [];
+    let totalLegendWidth = 0;
+    const legendPadding = 15; // 图例项之间的间距 (增加间距)
+    const legendCapsuleWidth = 12; // 图例胶囊宽度
+    const legendCapsuleHeight = 8; // 图例胶囊高度
+    const legendTextPadding = 5;   // 图例胶囊和文本之间的间距
+
+    groups.forEach(group => {
+        const textWidth = chartUtils.text.measure(null, group, labelMeasureOptions).width;
+        // 图例项宽度 = 胶囊宽度 + 间距 + 文本宽度 + 右侧间距
+        const legendItemWidth = legendCapsuleWidth + legendTextPadding + textWidth + legendPadding;
+        legendItemWidths.push(legendItemWidth);
+        totalLegendWidth += legendItemWidth;
+    });
+    
+    // 重新计算左边距以包含图标
+    // 左边距 = 最大标签宽度 + 标签与图标间距 + 图标最大宽度 + 图标与条形图间距
+    const labelIconPadding = 5; // 标签和图标之间的间距
+    const iconBarPadding = 10; // 图标和条形图开始位置的间距
+    margin.left = Math.max(margin.left, maxDimLabelWidth + labelIconPadding + maxIconSize + iconBarPadding);
+    
+    // 计算所需的最大右侧宽度 (保持不变)
+    const maxCapsulesWidth = maxCapsules * (capsuleWidth + capsuleSpacing);
+    const requiredRightWidth = maxCapsulesWidth + maxValueLabelWidth + 10; // 10px 额外间距
+    margin.right = Math.max(margin.right, requiredRightWidth);
+    
+    // 计算内部绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // ---------- 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");
+    
+    // 添加defs用于视觉效果 (保留阴影和纹理)
+    const defs = svg.append("defs");
+
+    const getColor = (group) => {
+         if (colorResolver.field(group, 0, { fallbackKey: "primary" }).value) {
+                return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+            }
+            
+    }
+    
+     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; // 固定斜线宽度
+    groups.forEach((group, i) => {
+        const groupColor = getColor(group);
+        const patternId = `pattern-${group.replace(/[^a-zA-Z0-9]/g, '-')}-${i}`; // 基�� group 生成 ID
+        const gradientId = `pattern-gradient-${group.replace(/[^a-zA-Z0-9]/g, '-')}-${i}`; // 渐变 ID
+
+        // 1. 定义 pattern 内使用的渐变
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%").attr("y1", "0%")
+            .attr("x2", "100%").attr("y2", "0%"); // 水平从左到右
+        
+        // 渐变颜色：从深到亮
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", colorResolver.variant(groupColor, { mode: "darker", amount: 0.7 }));
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", colorResolver.variant(groupColor, { mode: "brighter", amount: 1.2 }));
+
+        // 2. 定义 pattern
+        const pattern = defs.append("pattern")
+            .attr("id", patternId)
+            .attr("patternUnits", "userSpaceOnUse")
+            .attr("width", patternDensity)
+            .attr("height", patternDensity)
+            .attr("patternTransform", "rotate(45)");
+        
+        // 3. 在 pattern 内添加使用上面定义的渐变的背景矩形
+        pattern.append("rect")
+            .attr("width", patternDensity)
+            .attr("height", patternDensity)
+            .attr("fill", `url(#${gradientId})`); // 使用 pattern 内的渐变填充
+        
+        // 4. 在 pattern 内添加白色斜线 (覆盖在渐变背景上)
+        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. 创建比例尺 ----------
+    
+    // Y轴比例尺（用于维度）- 使用原始顺序
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(0.3); // 维度组之间的间距
+    
+    // ---------- 8. 创建图例 ----------
+    
+    // 添加图例 (修改为水平胶囊，与数据条一致，并实现自动换行)
+    const legendGroup = svg.append("g")
+        .attr("class", "legend")
+        .attr("transform", `translate(${margin.left}, ${margin.top *0.7})`); // 从左边距开始
+
+    // 图例项样式参数
+    const legendCapsuleHeightH = 10; // 水平胶囊的高度
+    const legendCapsuleWidthH = 15;  // 水平胶囊的宽度
+    const legendVerticalSpacing = 10; // 行之间的垂直间距
+    const rowHeight = legendCapsuleHeightH + legendVerticalSpacing;
+
+    // 测量图例项宽度
+    groups.forEach(group => {
+        const textWidth = chartUtils.text.measure(svg, group, labelMeasureOptions).width;
+        // 图例项宽度 = 胶囊宽度 + 间距 + 文本宽度
+        const itemWidth = legendCapsuleWidthH + legendTextPadding + textWidth;
+        legendItemWidths.push(itemWidth);
+    });
+
+    chartUtils.legend.draw(svg, groups, {
+        color: (group, index) => `url(#pattern-${group.replace(/[^a-zA-Z0-9]/g, '-')}-${index})`,
+        colorResolver,
+        colors,
+    }, {
+        x: margin.left,
+        y: margin.top * 0.7,
+        maxWidth: width - 100,
+        markerShape: "capsule",
+        markerWidth: legendCapsuleWidthH,
+        markerHeight: legendCapsuleHeightH,
+        labelGap: legendTextPadding,
+        itemGap: legendPadding,
+        rowGap: legendVerticalSpacing,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+    
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // 获取描边颜色（如果启用描边）
+    const getStrokeColor = (barColor) => {
+        return variables.has_stroke ? colorResolver.variant(barColor, { mode: "darker", amount: 0.5 }) : "none";
+    };
+    
+    // ---------- 10. 为每个维度绘制分组胶囊 ----------
+    
+    dimensions.forEach(dimension => {
+        // 获取此维度下的所有数据点
+        const dimensionData = chartData.filter(d => d[dimensionField] === dimension);
+        
+        if (dimensionData.length > 0) {
+            const dimensionY = yScale(dimension);
+            const dimensionBandwidth = yScale.bandwidth();
+            
+            // 计算每个组的胶囊行高度 (考虑组间间距)
+            const groupSpacingRatio = 0.1; // 组间距占行高的比例
+            const numGroups = groups.length;
+            const totalSpacingHeight = dimensionBandwidth * groupSpacingRatio * (numGroups > 1 ? numGroups - 1 : 0);
+            const availableGroupHeight = dimensionBandwidth - totalSpacingHeight;
+            const groupCapsuleHeight = availableGroupHeight / numGroups;
+            const finalCapsuleHeight = Math.max(4, groupCapsuleHeight); // 最小高度 4px
+            const groupSpacing = dimensionBandwidth * groupSpacingRatio; // 实际间距像素值
+
+            // 计算图标尺寸和位置
+            const iconSize = Math.min(maxIconSize, dimensionBandwidth * iconSizeRatio);
+            const iconY = dimensionY + (dimensionBandwidth - iconSize) / 2; // 图标垂直居中
+            const iconAvailable = images.field && images.field[dimension];
+            
+            // --- Corrected Icon and Label Positioning --- 
+            let finalLabelX;
+            const labelCenterY = dimensionY + dimensionBandwidth / 2;
+
+            if (iconAvailable) {
+                // Position icon just left of the bar area (x=0)
+                const iconX = -iconBarPadding - iconSize;
+                // Position label left of the icon
+                finalLabelX = iconX - labelIconPadding;
+
+                // 添加维度图标
+                g.append("image")
+                    .attr("x", iconX)
+                    .attr("y", iconY)
+                    .attr("width", iconSize)
+                    .attr("height", iconSize)
+                    .attr("preserveAspectRatio", "xMidYMid meet")
+                    .attr("xlink:href", images.field[dimension]);
+            } else {
+                // Position label just left of the bar area (x=0)
+                finalLabelX = -iconBarPadding;
+            }
+            
+            // 添加维度标签 (使用计算好的 finalLabelX)
+            g.append("text")
+                .attr("x", finalLabelX)
+                .attr("y", labelCenterY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(dimension);
+            
+            // --- End of Corrected Positioning ---
+            
+            // 绘制每个组的胶囊
+            groups.forEach((group, groupIndex) => {
+                const dataPoint = dimensionData.find(d => d[groupField] === group);
+                
+                if (dataPoint) {
+                    const value = +dataPoint[valueField];
+                    const capsuleCount = valueToCapsules(value);
+                    
+                    // 计算当前组胶囊的垂直起始位置 (包含组间距)
+                    const groupY = dimensionY + (groupIndex * (finalCapsuleHeight + groupSpacing));
+                    
+                    // 绘制胶囊
+                    for (let j = 0; j < capsuleCount; j++) {
+                        const capsuleX = j * (capsuleWidth + capsuleSpacing);
+                        
+                        g.append("rect")
+                            .attr("x", capsuleX)
+                            .attr("y", groupY)
+                            .attr("width", capsuleWidth)
+                            .attr("height", finalCapsuleHeight)
+                            // 应用包含渐变的纹理填充
+                            .attr("fill", `url(#pattern-${group.replace(/[^a-zA-Z0-9]/g, '-')}-${groupIndex})`)
+                            // 圆角
+                            .attr("rx", capsuleWidth / 2)
+                            .attr("ry", capsuleWidth / 2) // 使用宽度的一半确保胶囊状
+                            .style("stroke", getStrokeColor(getColor(group)))
+                            .style("stroke-width", variables.has_stroke ? 1 : 0)
+                            .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+                    }
+                    
+                    // 添加数值标签
+                    const formattedValue = `${chartUtils.format.autoText(value)}${valueUnit}`;
+                    // 定位在最后一个胶囊之后
+                    const lastCapsuleEnd = capsuleCount * (capsuleWidth + capsuleSpacing) - capsuleSpacing; // 最后一个胶囊的结束X坐标 (如果 count > 0)
+                    const labelX = (capsuleCount > 0 ? lastCapsuleEnd : 0) + 5; // 如果没有胶囊，标签从0开始，否则从最后一个胶囊后5px开始
+                    
+                    g.append("text")
+                        .attr("x", labelX)
+                        .attr("y", groupY + finalCapsuleHeight / 2) // 垂直居中于胶囊行
+                        .attr("dy", "0.35em")
+                        .attr("text-anchor", "start")
+                        .style("font-family", typography.annotation.font_family)
+                        .style("font-size", `${Math.max(finalCapsuleHeight * 0.5, parseFloat(typography.annotation.font_size))}px`)
+                        .style("font-weight", typography.annotation.font_weight)
+                        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                        .text(formattedValue);
+                }
+            });
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_10.js

@@ -0,0 +1,379 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_10",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 5]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js  //horizontal_grouped_bar_chart_05
+function makeChart(containerSelector, 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: "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" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 40,      // 顶部留出标题空间
+        right: 60,   // 右侧足够显示数值和分组标签
+        bottom: 30,   // 底部边距
+        left: 40     // 左侧空间减少，因为我们不显示维度文本，只显示图标
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    
+    const primaryGroupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 添加数值格式化函数
+    
+    // 获取唯一维度值和分组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const primaryGroups = [...new Set(chartData.map(d => d[primaryGroupField]))];
+    
+    // 按主要分组和数值进行分组和排序
+    const groupedData = {};
+    primaryGroups.forEach(group => {
+        // 过滤属于此组的数据
+        const groupItems = chartData.filter(d => d[primaryGroupField] === group);
+        
+        // 按数值降序排序
+        const sortedItems = [...groupItems].sort((a, b) => +b[valueField] - +a[valueField]);
+        
+        groupedData[group] = sortedItems;
+    });
+    
+    // ---------- 5. 计算标签宽度 ----------
+    
+    // 图标尺寸
+    const flagWidth = 20;
+    const flagHeight = 15;
+    const flagPadding = 5;
+    const labelMeasureOptions = {
+        fontFamily: typography.label.font_family,
+        fontSize: typography.label.font_size,
+        fontWeight: typography.label.font_weight
+    };
+    const annotationMeasureOptions = {
+        fontFamily: typography.annotation.font_family,
+        fontSize: typography.annotation.font_size,
+        fontWeight: typography.annotation.font_weight
+    };
+    
+    // 计算最大数值标签宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${chartUtils.format.autoText(+d[valueField])}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedValue, annotationMeasureOptions).width;
+        
+        maxValueWidth = Math.max(maxValueWidth, textWidth);
+    });
+    
+    // *** BEGIN ADDITION: Calculate Max Dimension Label Width ***
+    let maxDimensionLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedDimension, labelMeasureOptions).width;
+        maxDimensionLabelWidth = Math.max(maxDimensionLabelWidth, textWidth);
+    });
+    // *** END ADDITION ***
+    
+    // 计算分组注释的最大宽度
+    let maxGroupNoteWidth = 0;
+    primaryGroups.forEach(group => {
+        const textWidth = chartUtils.text.measure(null, group, labelMeasureOptions).width;
+        
+        maxGroupNoteWidth = Math.max(maxGroupNoteWidth, textWidth);
+    });
+    
+    // ** MODIFY ** 根据图标和最大标签尺寸调整左边距
+    const baseLeftPadding = 10; // Base padding to the left of the labels
+    margin.left = maxDimensionLabelWidth + flagPadding + flagWidth + flagPadding + baseLeftPadding;
+    
+    
+    // ---------- 6. 计算分组布局 ----------
+    
+    // 计算内部绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 计算合适的条形高度，确保所有条形在可用高度内可见
+    // 计算总条形数量和组数
+    let totalBars = 0;
+    primaryGroups.forEach(group => {
+        totalBars += groupedData[group].length;
+    });
+    
+    const numGroups = primaryGroups.length;
+    
+    // 计算组间间距的总高度
+    const groupPaddingRatio = 0.15; // 组间距占总高度的比例
+    const groupPadding = innerHeight * groupPaddingRatio / (numGroups + 1); // 分配给每个组间距
+    const totalGroupPadding = groupPadding * (numGroups - 1);
+    
+    // 计算可用于条形的总高度
+    const availableForBars = innerHeight - totalGroupPadding;
+    
+    // 计算条形高度和条形间距
+    const barPaddingRatio = 0.15; // Use fixed padding ratio, remove spacing effect logic
+    
+    // 计算理想的条形高度(包括间距)
+    const idealBarUnitHeight = availableForBars / totalBars;
+    
+    // 初始计算实际条形高度(不包括间距)
+    let calculatedBarHeight = idealBarUnitHeight * (1 - barPaddingRatio);
+    
+    // 限制最大条形高度
+    const barHeight = Math.min(calculatedBarHeight, 40);
+    
+    // 根据最终的条形高度计算条形间距，以保持总单元高度
+    const barPadding = idealBarUnitHeight - barHeight;
+    
+    // 计算每组的高度和偏移量
+    const groupHeights = {};
+    const groupOffsets = {};
+    
+    let currentOffset = margin.top;
+    primaryGroups.forEach(group => {
+        const itemCount = groupedData[group].length;
+        // 计算当前组的总高度（包括所有条形和条形间距）
+        const groupHeight = itemCount * barHeight + (itemCount - 1) * barPadding;
+        
+        groupHeights[group] = groupHeight;
+        groupOffsets[group] = currentOffset;
+        
+        // 更新下一组的起始位置
+        currentOffset += groupHeight + groupPadding;
+    });
+    
+    // ---------- 7. 创建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");
+    
+    // ---------- 8. 创建比例尺 ----------
+    
+    // X轴比例尺（用于数值）
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[valueField]) * 1.05]) // 添加5%边距
+        .range([0, innerWidth]);
+    
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, 0)`);
+    
+    // ---------- 10. 渲染每个分组 ----------
+    
+    // 获取条形颜色的辅助函数
+    const getBarColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#3ca951" }).value;
+    };
+    
+    // 在条形左侧添加灰色竖线
+    g.append("line")
+        .attr("x1", 0)
+        .attr("y1", margin.top)
+        .attr("x2", 0)
+        .attr("y2", height - margin.bottom)
+        .attr("stroke", "#cccccc")
+        .attr("stroke-width", 3);
+    // 遍历每个主要分组，添加背景矩形
+    primaryGroups.forEach(group => {
+        const groupData = groupedData[group];
+        const groupOffset = groupOffsets[group];
+        const groupHeight = groupHeights[group];
+        const barColor = getBarColor(group);
+        
+        // 添加分组注释
+        if (groupData.length > 0) {
+            const lastItemIndex = groupData.length - 1;
+            const lastItemY = groupOffset + lastItemIndex * (barHeight + barPadding) + barHeight / 2;
+            
+            g.append("text")
+                .attr("x",  width - margin.left - 10)
+                .attr("y", lastItemY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.label.font_family) // 使用label字体
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                
+                .text(group);
+        }
+        
+        // 为组中的每个项目绘制条形和标签
+        groupData.forEach((dataPoint, index) => {
+            // 计算条形的y坐标，考虑到条形间距
+            const yPos = groupOffset + index * (barHeight + barPadding);
+            const barWidth = xScale(+dataPoint[valueField]);
+            
+            // Draw the bar using a simple rect element
+            g.append("rect") // Revert back to rect
+                .attr("x", 0)
+                .attr("y", yPos)
+                .attr("width", barWidth)
+                .attr("height", barHeight)
+                .attr("fill", barColor) // Use solid bar color
+                .attr("rx", barHeight/6)
+                .attr("ry", barHeight/6)
+                .on("mouseover", function() {
+                    d3.select(this).attr("opacity", 0.8);
+                })
+                .on("mouseout", function() {
+                    d3.select(this).attr("opacity", 1);
+                });
+            
+            // 提取维度
+            const dimension = dataPoint[dimensionField];
+            
+            // 添加国家/维度图标 (Positioned left of bar)
+            const flagX = -flagWidth - flagPadding; // Icon right edge at -flagPadding
+            const flagY = yPos + (barHeight - flagHeight) / 2;
+            
+            if (images.field && images.field[dimension]) {
+                g.append("image")
+                    .attr("x", flagX)
+                    .attr("y", flagY)
+                    .attr("width", flagWidth)
+                    .attr("height", flagHeight)
+                    .attr("preserveAspectRatio","xMidYMid meet")
+                    .attr("xlink:href", images.field[dimension]);
+            }
+
+            // *** BEGIN ADDITION: Add Dimension Label (Left of Icon, Right Aligned) ***
+            const labelX = flagX - flagPadding; // Label right edge next to icon's left edge
+            const labelY = yPos + barHeight / 2; // Vertically centered with bar
+            const formattedDimension = dimensionUnit ? 
+                `${dimension}${dimensionUnit}` : 
+                `${dimension}`;
+
+            g.append("text")
+                .attr("class", "dimension-label")
+                .attr("x", labelX)
+                .attr("y", labelY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end") // Right align text
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                .text(formattedDimension);
+            // *** END ADDITION ***
+            
+            // 添加数值标签
+            const formattedValue = valueUnit ? 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+
+            // --- BEGIN MODIFICATION: Conditional Label Placement ---
+            const valueLabelFontSize = `${barHeight * 0.7}px`;
+            const textWidth = chartUtils.text.measure(g, formattedValue, {
+                fontFamily: typography.annotation.font_family,
+                fontSize: valueLabelFontSize,
+                fontWeight: typography.annotation.font_weight
+            }).width;
+
+            const labelPadding = 10; // Padding for inside label (5px each side)
+
+            // Decide label position and color
+            let valueLabelX, valueLabelAnchor, valueLabelFill;
+            if (textWidth + labelPadding < barWidth) {
+                // Place inside, centered, white
+                valueLabelX = barWidth / 2;
+                valueLabelAnchor = "middle";
+                valueLabelFill = "white";
+            } else {
+                // Place outside, right, default color
+                valueLabelX = barWidth + 5;
+                valueLabelAnchor = "start";
+                valueLabelFill = colorResolver.text({ fallback: "#000000" }).value;
+            }
+            
+            // Create the actual value label with calculated properties
+            g.append("text")
+                .attr("x", valueLabelX)
+                .attr("y", yPos + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", valueLabelAnchor)
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", `${barHeight * 0.7}px`)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", valueLabelFill)
+                .text(formattedValue);
+            // --- END MODIFICATION ---
+        });
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_11.js

@@ -0,0 +1,393 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_11",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 5]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js  //horizontal_grouped_bar_chart_05
+function makeChart(containerSelector, 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: "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" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 40,      // 顶部留出标题空间
+        right: 60,   // 右侧足够显示数值和分组标签
+        bottom: 30,   // 底部边距
+        left: 40     // 左侧空间减少，因为我们不显示维度文本，只显示图标
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    
+    const primaryGroupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 添加数值格式化函数
+    
+    // 获取唯一维度值和分组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const primaryGroups = [...new Set(chartData.map(d => d[primaryGroupField]))];
+    
+    // 按主要分组和数值进行分组和排序
+    const groupedData = {};
+    primaryGroups.forEach(group => {
+        // 过滤属于此组的数据
+        const groupItems = chartData.filter(d => d[primaryGroupField] === group);
+        
+        // 按数值降序排序
+        const sortedItems = [...groupItems].sort((a, b) => +b[valueField] - +a[valueField]);
+        
+        groupedData[group] = sortedItems;
+    });
+    
+    // ---------- 5. 计算标签宽度 ----------
+    
+    // 图标尺寸
+    const flagWidth = 20;
+    const flagHeight = 15;
+    const flagPadding = 5;
+    const labelMeasureOptions = {
+        fontFamily: typography.label.font_family,
+        fontSize: typography.label.font_size,
+        fontWeight: typography.label.font_weight
+    };
+    const annotationMeasureOptions = {
+        fontFamily: typography.annotation.font_family,
+        fontSize: typography.annotation.font_size,
+        fontWeight: typography.annotation.font_weight
+    };
+    
+    // 计算最大数值标签宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${chartUtils.format.autoText(+d[valueField])}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedValue, annotationMeasureOptions).width;
+        
+        maxValueWidth = Math.max(maxValueWidth, textWidth);
+    });
+    
+    // *** BEGIN ADDITION: Calculate Max Dimension Label Width ***
+    let maxDimensionLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedDimension, labelMeasureOptions).width;
+        maxDimensionLabelWidth = Math.max(maxDimensionLabelWidth, textWidth);
+    });
+    // *** END ADDITION ***
+    
+    // 计算分组注释的最大宽度 - Now used for Legend Items
+    let totalLegendWidth = 0;
+    const legendItemWidths = [];
+    const legendSwatchSize = 15;
+    const legendSwatchPadding = 5;
+    const legendItemSpacing = 15; // Spacing between legend items
+
+    primaryGroups.forEach(group => {
+        const textWidth = chartUtils.text.measure(null, group, labelMeasureOptions).width;
+        const itemWidth = legendSwatchSize + legendSwatchPadding + textWidth + legendItemSpacing;
+        legendItemWidths.push(itemWidth);
+        totalLegendWidth += itemWidth;
+    });
+    // Adjust total width (remove spacing after last item)
+    if (totalLegendWidth > 0) {
+        totalLegendWidth -= legendItemSpacing; 
+    }
+    
+    // --- BEGIN LEGEND MARGIN ADJUSTMENT ---
+    const legendHeight = legendSwatchSize + 20; // Swatch height + top/bottom padding
+    margin.top += legendHeight;
+    // --- END LEGEND MARGIN ADJUSTMENT ---
+    
+    // ** MODIFY ** 根据图标和最大标签尺寸调整左边距
+    const baseLeftPadding = 10; // Base padding to the left of the labels
+    margin.left = maxDimensionLabelWidth + flagPadding + flagWidth + flagPadding + baseLeftPadding;
+    
+    
+    // ---------- 6. 计算分组布局 ----------
+    
+    // 计算内部绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    let innerHeight = height - margin.top - margin.bottom; // Recalculate innerHeight
+    
+    // 计算合适的条形高度，确保所有条形在可用高度内可见
+    // 计算总条形数量和组数
+    let totalBars = 0;
+    primaryGroups.forEach(group => {
+        totalBars += groupedData[group].length;
+    });
+    
+    const numGroups = primaryGroups.length;
+    
+    // 计算组间间距的总高度
+    const groupPaddingRatio = 0.15; // 组间距占总高度的比例
+    const groupPadding = innerHeight * groupPaddingRatio / (numGroups + 1); // 分配给每个组间距
+    const totalGroupPadding = groupPadding * (numGroups - 1);
+    
+    // 计算可用于条形的总高度
+    const availableForBars = innerHeight - totalGroupPadding;
+    
+    // 计算条形高度和条形间距
+    const barPaddingRatio = 0.15; // Use fixed padding ratio, remove spacing effect logic
+    
+    // 计算理想的条形高度(包括间距)
+    const idealBarUnitHeight = availableForBars / totalBars;
+    
+    // 实际条形高度(不包括间距)
+    const barHeight = idealBarUnitHeight * (1 - barPaddingRatio);
+    const barPadding = idealBarUnitHeight * barPaddingRatio;
+    
+    // 计算每组的高度和偏移量
+    const groupHeights = {};
+    const groupOffsets = {};
+    
+    let currentOffset = margin.top;
+    primaryGroups.forEach(group => {
+        const itemCount = groupedData[group].length;
+        // 计算当前组的总高度（包括所有条形和条形间距）
+        const groupHeight = itemCount * barHeight + (itemCount - 1) * barPadding;
+        
+        groupHeights[group] = groupHeight;
+        groupOffsets[group] = currentOffset;
+        
+        // 更新下一组的起始位置
+        currentOffset += groupHeight + groupPadding;
+    });
+    
+    // ---------- 7. 创建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");
+    
+    // --- BEGIN Gradient Definitions ---
+    const defs = svg.append("defs");
+    
+    // Moved getBarColor definition here (Needed for gradient definition)
+    const getBarColor = (group) => {
+        return colorResolver.field(group, 0, { fallbackKey: "primary", fallback: "#3ca951" }).value;
+    };
+
+    primaryGroups.forEach(group => {
+        const groupColor = getBarColor(group);
+        const gradientId = `bar-gradient-${group.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '')}`;
+
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%") // Horizontal gradient
+            .attr("y2", "0%");
+
+        // 3-stop gradient: dark -> bright -> dark
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(groupColor, { mode: "darker", amount: 0.3 }));
+
+        gradient.append("stop")
+            .attr("offset", "50%")
+            .attr("stop-color", colorResolver.variant(groupColor, { mode: "brighter", amount: 1.5 })); // Adjusted brightness a bit from 2.5
+
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(groupColor, { mode: "darker", amount: 0.3 }));
+    });
+    // --- END Gradient Definitions ---
+
+    // --- BEGIN LEGEND CREATION ---
+    // getBarColor is defined above now
+    chartUtils.legend.centered(svg, primaryGroups, {
+        color: group => getBarColor(group),
+        colorResolver,
+        colors,
+    }, width / 2, legendHeight / 2 + 80, {
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 15,
+        fontSize: typography.label.font_size,
+        fontFamily: typography.label.font_family,
+        fontWeight: typography.label.font_weight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        markerRadius: variables.has_rounded_corners ? 2 : 0,
+    });
+
+    // ---------- 8. 创建比例尺 ----------
+    
+    // X轴比例尺（用于数值）
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[valueField]) * 1.05]) // 添加5%边距
+        .range([0, innerWidth]);
+    
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`); // Adjust group transform for new margin
+    
+    // ---------- 10. 渲染每个分组 ----------
+    
+    // 遍历每个主要分组，添加背景矩形
+    primaryGroups.forEach(group => {
+        const groupData = groupedData[group];
+        const groupOffset = groupOffsets[group];
+        const groupHeight = groupHeights[group];
+        const barColor = getBarColor(group);
+        
+        // 为组中的每个项目绘制条形和标签
+        groupData.forEach((dataPoint, index) => {
+            // 计算条形的y坐标，考虑到条形间距
+            const yPos = groupOffset + index * (barHeight + barPadding);
+            const barWidth = xScale(+dataPoint[valueField]);
+            
+            // Draw the bar using a simple rect element
+            g.append("rect") // Revert back to rect
+                .attr("x", 0)
+                .attr("y", yPos)
+                .attr("width", barWidth)
+                .attr("height", barHeight)
+                // Apply gradient fill
+                .attr("fill", `url(#bar-gradient-${group.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '')})`) 
+                .attr("rx", barHeight/6)
+                .attr("ry", barHeight/6)
+                .on("mouseover", function() {
+                    d3.select(this).attr("opacity", 0.8);
+                })
+                .on("mouseout", function() {
+                    d3.select(this).attr("opacity", 1);
+                });
+            
+            // 提取维度
+            const dimension = dataPoint[dimensionField];
+            
+            // 添加国家/维度图标 (Positioned left of bar)
+            const flagX = -flagWidth - flagPadding; // Icon right edge at -flagPadding
+            const flagY = yPos + (barHeight - flagHeight) / 2;
+            
+            if (images.field && images.field[dimension]) {
+                g.append("image")
+                    .attr("x", flagX)
+                    .attr("y", flagY)
+                    .attr("width", flagWidth)
+                    .attr("height", flagHeight)
+                    .attr("preserveAspectRatio","xMidYMid meet")
+                    .attr("xlink:href", images.field[dimension]);
+            }
+
+            // *** BEGIN ADDITION: Add Dimension Label (Left of Icon, Right Aligned) ***
+            const labelX = flagX - flagPadding; // Label right edge next to icon's left edge
+            const labelY = yPos + barHeight / 2; // Vertically centered with bar
+            const formattedDimension = dimensionUnit ? 
+                `${dimension}${dimensionUnit}` : 
+                `${dimension}`;
+
+            g.append("text")
+                .attr("class", "dimension-label")
+                .attr("x", labelX)
+                .attr("y", labelY)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end") // Right align text
+                .style("font-family", typography.label.font_family)
+                .style("font-size", typography.label.font_size)
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                .text(formattedDimension);
+            // *** END ADDITION ***
+            
+            // 添加数值标签
+            const formattedValue = valueUnit ? 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+
+            // --- BEGIN MODIFICATION: Force Label Outside --- 
+            
+            const valueLabelX = barWidth + 5;
+            const valueLabelAnchor = "start";
+            const valueLabelFill = colorResolver.text({ fallback: "#000000" }).value;
+            
+            // Create the actual value label with fixed properties
+            g.append("text")
+                .attr("x", valueLabelX)
+                .attr("y", yPos + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", valueLabelAnchor)
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", `${barHeight * 0.7}px`)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", valueLabelFill)
+                .text(formattedValue);
+            // --- END MODIFICATION ---
+        });
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_12.js

@@ -0,0 +1,556 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_12",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 30], [0, "inf"], [2, 10]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "styled",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js  horizontal_grouped_bar_chart_01
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据准备阶段 ----------
+    
+    // 提取数据和配置
+    const jsonData = data;                          // 完整的JSON数据对象
+    const chartData = jsonData.data.data;                // 实际数据点数组
+    const variables = jsonData.variables || {};     // 图表配置
+    const typography = jsonData.typography || {     // 字体设置，如果不存在则使用默认值
+        title: { font_family: "'Comic Sans MS', cursive", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "'Comic Sans MS', cursive", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "'Comic Sans MS', cursive", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "'Comic Sans MS', cursive", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };  // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸和边距
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 为标题和副标题预留空间，即使不显示它们
+    const titleHeight = 70;  // 为标题预留至少70的高度
+    
+    // 分析图表区域底部边距
+    const bottomMargin = 80;
+    
+    // 初始设置边距
+    const margin = { 
+        top: titleHeight,     // 顶部留出标题空间
+        right: 80,            // 右侧足够显示数值
+        bottom: bottomMargin, // 底部边距
+        left: 150             // 左侧暂时设为最小值，稍后会根据标签长度调整
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit;
+    }
+    
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取维度（如Gen Z, Millennials等）和分组（如$50 or more, $1-49, Nothing）
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // ---------- 5. 计算标签和图标空间 ----------
+    
+    // 创建临时SVG用于测量文本宽度
+    const tempSvg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("visibility", "hidden");
+    
+    // 计算维度标签最大宽度
+    let maxDimensionWidth = 0;
+    dimensions.forEach(dimension => {
+        const textWidth = chartUtils.text.measure(tempSvg, dimension, {
+            fontFamily: "'Comic Sans MS', cursive",
+            fontSize: typography.label.font_size
+        }).width;
+        maxDimensionWidth = Math.max(maxDimensionWidth, textWidth);
+    });
+    
+    // 计算分组标签最大宽度
+    let maxGroupWidth = 0;
+    groups.forEach(group => {
+        const textWidth = chartUtils.text.measure(tempSvg, group, {
+            fontFamily: "'Comic Sans MS', cursive",
+            fontSize: typography.label.font_size,
+            fontWeight: "bold"
+        }).width;
+        maxGroupWidth = Math.max(maxGroupWidth, textWidth);
+    });
+    
+    // 删��临时SVG
+    tempSvg.remove();
+    
+    // === 修改点：结合维度标签和组标签最大宽度，重新计算margin.left ===
+    const maxLabelWidth = Math.max(maxDimensionWidth, maxGroupWidth);
+    const sketchPadding = 5; // 背景内边距
+    const dimensionLabelWidth = maxLabelWidth + 2 * sketchPadding + 20; // 标签宽度 + 背景padding + 额外空间
+    margin.left = Math.max(margin.left, dimensionLabelWidth + 20);
+    
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // *** 修改: 移除间距相关的计算 ***
+    // const groupPadding = innerHeight * (variables.has_spacing ? 0.08 : 0.06);  // 移除组间距
+    const groupHeight = innerHeight / groups.length; // 每组的原始高度
+    
+    // *** 修改: 移除间距对barHeight的影响 ***
+    // const barHeight = (groupHeight - groupPadding) / dimensions.length;
+    const barHeight = groupHeight / dimensions.length; // 维度在组内均分高度
+    // const actualBarHeight = variables.has_spacing ? barHeight * 0.65 : barHeight * 0.75;   // 移除间距影响
+    const actualBarHeight = barHeight * 0.75; // 固定条形实际高度比例
+    
+    // 标志尺寸
+    const iconWidth = actualBarHeight * 0.9;
+    const iconHeight = iconWidth;
+    const iconRightPadding = iconWidth * 0.4;  // 图标右侧到柱子的间距
+    
+    // ---------- 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");
+    
+    // 创建defs用于滤镜和渐变
+    const defs = svg.append("defs");
+    
+    // ---------- 6.1 创建视觉效果 ----------
+    
+    // --- Sketch Pattern for Left Bars (or even index groups) ---
+    const patternLeft = defs.append("pattern")
+        .attr("id", "pattern-sketch-left")
+        .attr("width", 8) 
+        .attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(45)"); 
+
+    patternLeft.append("rect")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("fill", "#4269d0"); // 使用一个基色，具体颜色会被覆盖
+
+    patternLeft.append("path")
+        .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0")
+        .attr("stroke", "#FFFFFF") 
+        .attr("stroke-width", 0.8);
+
+    // --- Sketch Pattern for Right Bars (or odd index groups) ---
+    const patternRight = defs.append("pattern")
+        .attr("id", "pattern-sketch-right")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(-45)"); // 反向旋转
+
+    patternRight.append("rect")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("fill", "#ff725c"); // 使用另一个基色
+
+    patternRight.append("path")
+        .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0") 
+        .attr("stroke", "#FFFFFF") 
+        .attr("stroke-width", 0.8);
+
+    // --- Sketch Pattern for Label Backgrounds ---
+    const patternLabelSketch = defs.append("pattern")
+         .attr("id", "pattern-label-sketch") 
+         .attr("width", 8) 
+         .attr("height", 8)
+         .attr("patternUnits", "userSpaceOnUse")
+         .attr("patternTransform", "rotate(45)"); 
+
+     patternLabelSketch.append("rect")
+         .attr("width", 8)
+         .attr("height", 8)
+         .attr("fill", "#FFFFFF"); 
+
+     patternLabelSketch.append("path")
+         .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0") 
+         .attr("stroke", "#CCCCCC") 
+         .attr("stroke-width", 0.6); 
+
+    
+    // ---------- 7. 创建比例尺 ----------
+    
+    // 计算最大值用于X轴比例尺
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+    
+    // 添加数值格式化函数
+    
+    // 值的X比例尺
+    const xScale = d3.scaleLinear()
+        .domain([0, maxValue * 1.1]) // 添加10%边距
+        .range([0, innerWidth]);
+    
+    // ---------- 8. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // ---------- 9. 辅助函数 ----------
+    
+    // 获取组颜色
+    function getGroupColor(group) {
+        // 优先使用指定颜色
+        if (colorResolver.field(group, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        }
+        
+        // 如果有可用颜色数组，按索引使用
+        const groupIndex = groups.indexOf(group);
+        const availableColor = colorResolver.available(groupIndex, { cycle: true, usePalette: false }).value;
+        if (availableColor) return availableColor;
+        
+        // Provide default fallback colors if none are defined
+        const defaultColors = ["#4269d0", "#ff725c", "#4CAF50", "#FFC107", "#9C27B0", "#795548"];
+        return defaultColors[groupIndex % defaultColors.length];
+    }
+    
+    // 获取描边颜色
+    const getStrokeColor = () => {
+        return "#555"; // 固定手绘描边颜色
+    };
+    
+    // *** 添加: 计算字体大小的函数 (从 vertical_group_bar_chart_13 复制) ***
+    const calculateFontSize = (text, maxWidth, baseSize = 12) => {
+        const avgCharWidth = baseSize * 0.6;
+        const textWidth = text.length * avgCharWidth;
+        if (textWidth < maxWidth) {
+            return baseSize;
+        }
+        return Math.max(8, Math.floor(baseSize * (maxWidth / textWidth))); // 最小字体8px
+    };
+    
+    // ========== 9. 添加交替行背景（新增） ==========
+    if (jsonData.variation?.background === "styled") {
+        // 每个 group 下有若干维度，故在每个 group 里为维度的"行"画背景
+        groups.forEach((group, groupIndex) => {
+            const groupStartY = groupIndex * groupHeight;
+            dimensions.forEach((dimension, dimIndex) => {
+                // 偶数行添加背景
+                if (dimIndex % 2 === 0) {
+                    g.append("rect")
+                        .attr("x", 0)
+                        .attr("y", groupStartY + dimIndex * barHeight)
+                        .attr("width", innerWidth)
+                        .attr("height", barHeight)
+                        .attr("class","background")
+                        .attr("fill", "#f0f0f0") // 稍微调整背景色
+                        .attr("opacity", 0.7); // 稍微调整透明度
+                }
+            });
+        });
+    }
+    
+    // ---------- 10. 绘制图表 ----------
+    
+    // 为每个组创建一个分组
+    groups.forEach((group, groupIndex) => {
+        // 计算该组的垂直位置
+        const groupStartY = groupIndex * (groupHeight);
+        
+        // 筛选该组的数据
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // *** 添加: 确定该组使用的手绘图案 ***
+        const barPatternId = groupIndex % 2 === 0 ? "url(#pattern-sketch-left)" : "url(#pattern-sketch-right)";
+        // *** 添加: 获取组的实际颜色，用于图案背景 (可选，如果需要动态颜色图案) ***
+        const groupBaseColor = getGroupColor(group); 
+        // *** 可选: 更新对应 pattern 的 rect fill (如果需要动态颜色) ***
+        // d3.select(`#${barPatternId.slice(5, -1)} rect`).attr("fill", groupBaseColor);
+
+        // 为每个维度绘制条形
+        dimensions.forEach((dimension, dimIndex) => {
+            // 查找数据点
+            const dataPoint = groupData.find(d => d[dimensionField] === dimension);
+            
+            if (dataPoint) {
+                // 条形的垂直位置
+                const barY = groupStartY + dimIndex * barHeight;
+                
+                // 条形宽度
+                const barWidth = xScale(+dataPoint[valueField]);
+                
+                // 创建标签和图标组
+                const labelGroup = g.append("g")
+                    .attr("transform", `translate(0, ${barY + actualBarHeight / 2})`);
+                
+                // 绘制图标
+                if (images.field && images.field[dimension]) {
+                    // 图标位置：紧贴条形左侧
+                    labelGroup.append("image")
+                        .attr("x", -iconWidth - iconRightPadding)
+                        .attr("y", -iconHeight/2)
+                        .attr("width", iconWidth)
+                        .attr("height", iconHeight)
+                        .attr("preserveAspectRatio","xMidYMid meet")
+                        .attr("xlink:href", images.field[dimension]);
+                }
+                
+                // *** 修改: 绘制带手绘背景的维度标签 ***
+                const dimensionTextContent = dimension;
+                const dimensionLabelX = -iconWidth - iconRightPadding - 15; // 文本右边缘 X 坐标
+                const dimensionBaseFontSize = parseFloat(typography.label.font_size);
+                const dimensionMaxTextHeight = actualBarHeight * 0.8; // 限制最大高度
+                const dimensionFontSize = Math.min(dimensionBaseFontSize, dimensionMaxTextHeight);
+
+                const dimBBox = chartUtils.text.measure(labelGroup, dimensionTextContent, {
+                    fontFamily: "'Comic Sans MS', cursive",
+                    fontSize: `${dimensionFontSize}px`,
+                    fontWeight: typography.label.font_weight
+                });
+                
+                // 3. 计算背景尺寸和位置
+                const dimBgWidth = dimBBox.width + 2 * sketchPadding;
+                const dimBgHeight = dimBBox.height + 1.5 * sketchPadding;
+                const dimBgX = dimensionLabelX - dimBBox.width - sketchPadding; // 背景左上角X
+                const dimBgY = -dimBgHeight / 2; // 背景垂直居中
+
+                // 4. 绘制背景 (在文本之前插入)
+                labelGroup.insert("rect", ":first-child") // 插入为第一个子元素
+                    .attr("x", dimBgX)
+                    .attr("y", dimBgY)
+                    .attr("width", dimBgWidth)
+                    .attr("height", dimBgHeight)
+                    .attr("fill", "url(#pattern-label-sketch)")
+                    .attr("stroke", "#AAAAAA")
+                    .attr("stroke-width", 0.5);
+
+                // 5. 绘制最终文本 (在背景之上)
+                labelGroup.append("text")
+                    .attr("class", "dimension-label")
+                    .attr("x", dimensionLabelX) 
+                    .attr("y", 0) 
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "end") 
+                    .style("font-family", "'Comic Sans MS', cursive") // *** 强制字体 ***
+                    .style("font-size", `${dimensionFontSize}px`)
+                    .style("font-weight", typography.label.font_weight)
+                    .style("fill", colorResolver.text({ fallback: "#333" }).value)
+                    .text(dimensionTextContent);
+
+                // *** 修改: 绘制条形，使用手绘图案和描边 ***
+                g.append("rect")
+                    .attr("class", `bar group-${groupIndex}`)
+                    .attr("x", 0)
+                    .attr("y", barY)
+                    .attr("width", barWidth)
+                    .attr("height", actualBarHeight) 
+                    .attr("fill", barPatternId) // 应用手绘图案
+                    .attr("rx", 5) // *** 强制圆角 ***
+                    .attr("ry", 5) // *** 强制圆角 ***
+                    .style("stroke", variables.has_stroke ? getStrokeColor() : "none") // 应用手绘描边
+                    .style("stroke-width", variables.has_stroke ? 1 : 0) // 固定描边宽度
+                    // .style("filter", variables.has_shadow ? "url(#shadow)" : "none") // *** 移除阴影应用 ***
+                    .on("mouseover", function() {
+                        d3.select(this).attr("opacity", 0.8);
+                    })
+                    .on("mouseout", function() {
+                        d3.select(this).attr("opacity", 1);
+                    });
+
+                // *** 修改: 绘制带手绘背景的数值标签 ***
+                const formattedValue = valueUnit ?
+                    `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` :
+                    `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+                const valueLabelBaseFontSize = Math.min(parseFloat(typography.annotation.font_size), actualBarHeight * 0.55); // 基础字体大小
+                
+                // -- 创建一个组来容纳标签和背景 --
+                const valueLabelGroup = g.append("g")
+                    .attr("class", "value-label-group");
+
+                const valueBBox = chartUtils.text.measure(valueLabelGroup, formattedValue, {
+                    fontFamily: typography.annotation.font_family,
+                    fontSize: `${valueLabelBaseFontSize}px`,
+                    fontWeight: "bold"
+                });
+
+                // 3. 计算背景尺寸和位置 (相对于组的0,0) - 用于居中
+                const valueBgWidth = valueBBox.width + 2 * sketchPadding;
+                const valueBgHeight = valueBBox.height + 1.5 * sketchPadding;
+                // *** 修改: 背景定位改为相对中心 (0,0) ***
+                const valueBgX = -valueBgWidth / 2;
+                const valueBgY = -valueBgHeight / 2;
+
+                // 4. 绘制背景
+                 valueLabelGroup.append("rect")
+                    .attr("class", "value-label-background")
+                    .attr("x", valueBgX)
+                    .attr("y", valueBgY)
+                    .attr("width", valueBgWidth)
+                    .attr("height", valueBgHeight)
+                    .attr("fill", "url(#pattern-label-sketch)")
+                    .attr("stroke", "#AAAAAA")
+                    .attr("stroke-width", 0.5);
+                    
+                // 5. 绘制最终文本 (在组内居中)
+                valueLabelGroup.append("text")
+                    .attr("class", "value-label")
+                    .attr("x", 0) // *** 文本X居中 ***
+                    .attr("y", 0) // *** 文本Y基线调整 ***
+                    .attr("dy", "0em") // 配合 dominant-baseline
+                    .attr("text-anchor", "middle") // *** 文本水平居中 ***
+                    .attr("dominant-baseline", "middle") // *** 文本垂直居中 ***
+                    .style("fill", colorResolver.text({ fallback: "#333" }).value)
+                    .style("font-family", "'Comic Sans MS', cursive") // *** 强制字体 ***
+                    .style("font-size", `${valueLabelBaseFontSize}px`)
+                    .style("font-weight", "bold")
+                    .style("pointer-events", "none")
+                    .text(formattedValue);
+                    
+                // 6. 定位整个组 (调整X坐标以考虑背景宽度)
+                // const valueLabelGroupX = barWidth + 8; // 旧的起始X
+                const valueLabelGroupX = barWidth + 8 + valueBgWidth / 2; // *** 调整组X位置，使其中心在 bar 右侧 8px 处 ***
+                const valueLabelGroupY = barY + actualBarHeight / 2; // 组的Y位置：条形垂直中心
+                valueLabelGroup.attr("transform", `translate(${valueLabelGroupX}, ${valueLabelGroupY})`);
+            }
+        });
+    });
+
+    // *** 添加: wrapText 辅助函数 (如果尚未存在，需要从 vertical_group_bar_chart_13 复制或确保可用) ***
+    // (假设 wrapText 函数已存在或已添加)
+    function wrapText(text, str, width, lineHeight) {
+        const words = str.split(/\s+/).reverse();
+        let word;
+        let line = [];
+        let lineNumber = 0;
+        const y = text.attr("y"); // 获取原始 y
+        const x = text.attr("x"); // 获取原始 x
+        const dy = parseFloat(text.attr("dy") || 0); // 获取原始 dy
+
+        text.text(null); // 清空现有文本
+
+        let tspans = [];
+
+        // 优先按单词换行
+        if (words.length > 1 && words.some(w => w.length > 0)) { // Check for actual words
+            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.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: text.style("font-family"),
+                    fontSize: parseFloat(text.style("font-size")),
+                    fontWeight: text.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;
+        // 调整垂直居中: 向上移动半行 * (总行数 - 1)
+        // dominant-baseline="hanging" 时，第一个 tspan 的 y 决定顶部位置
+        // dy 用于后续行的偏移
+        const firstLineYAdjust = - (totalLines - 1) / 2 * lineHeight; 
+
+        tspans.forEach((lineText, i) => {
+            text.append("tspan")
+                .attr("x", x) // 保持原始 x
+                .attr("dy", (i === 0 ? firstLineYAdjust + dy : lineHeight) + "em") // 第一行调整基线，后续行应用行高
+                .text(lineText);
+        });
+    }
+
+    const equalGroupRectWidth = Math.min(innerWidth / groups.length, width * 0.8 / groups.length);
+    chartUtils.legend.labeledStrip(svg, groups.map((group, index) => ({
+        label: group,
+        fill: index % 2 === 0 ? "url(#pattern-sketch-left)" : "url(#pattern-sketch-right)",
+    })), {
+        centerWidth: width,
+        y: height - margin.bottom + 20,
+        itemWidth: equalGroupRectWidth,
+        showNumber: true,
+        labelFontFamily: "'Comic Sans MS', cursive",
+        numberFontFamily: "'Comic Sans MS', cursive",
+        labelFontSize: 12,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        wrapLabel: (node, label, w) => wrapText(node, label, w, 1.1),
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_group_bar_chart_13.js

@@ -0,0 +1,252 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Group Bar Chart",
+    "chart_name": "horizontal_group_bar_chart_13",
+    "chart_for": "comparison",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[2, 20], [0, "inf"], [2, 5]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"], 
+    "required_other_colors": ["primary"],
+    "supported_effects": [], 
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平分组条形图实现 - 使用D3.js   horizontal_split_bar_chart_06 (Applying Sketch Style)
+function makeChart(containerSelector, data) {
+    // ---------- 1. 数据准备阶段 ----------
+    
+    // 提取数据和配置
+    const jsonData = data;                           // 完整的JSON数据对象
+    const chartData = jsonData.data.data;            // 实际数据点数组  
+    const variables = jsonData.variables || {};      // 图表配置
+    const typography = jsonData.typography || {      // 字体设置，如果不存在则使用默认值
+        title: { font_family: "'Comic Sans MS', cursive", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "'Comic Sans MS', cursive", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "'Comic Sans MS', cursive", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "'Comic Sans MS', cursive", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || { text_color: "#333333" };  // 颜色设置
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const images = jsonData.images || { field: {}, other: {} };   // 图像设置
+    const dataColumns = chartUtils.schema.columns(jsonData); // 数据列定义
+    
+    // 设置视觉效果变量的默认值
+    variables.has_stroke = variables.has_stroke !== undefined ? variables.has_stroke : true; // Default stroke to true for sketch
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // ---------- 2. 尺寸和布局设置 ----------
+    
+    // 设置图表总尺寸
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    
+    // 设置边距
+    const margin = {
+        top: 100,      // 顶部留出标题空间
+        right: 30,    // 右侧足够显示数值
+        bottom: 60,   // 底部边距
+        left: 60     // 左侧初始空间，会动态调整
+    };
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    // 根据数据列顺序提取字段名
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const groupField = chartUtils.schema.channel(jsonData, "group").key;
+    
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; 
+    let groupUnit = "";
+    
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+    
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    if (chartUtils.schema.channel(jsonData, "group").unit !== "none") {
+        groupUnit = chartUtils.schema.channel(jsonData, "group").unit; 
+    }
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 获取唯一维度值和分组值
+    const dimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 不对数据进行排序，使用原始顺序
+    
+    // ---------- 5. 计算标签宽度 (使用手绘字体) ----------
+    // *** 添加: 手绘背景内边距 ***
+    const sketchPadding = 5;
+    
+    // 创建临时SVG来测量文本宽度
+    const tempSvg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("visibility", "hidden");
+    
+    // 计算最大维度标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedDimension, {
+            fontFamily: "'Comic Sans MS', cursive",
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        // *** 修改: 考虑背景padding ***
+        const totalWidth = textWidth + 2 * sketchPadding; // 文本宽度 + 背景padding
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // 计算最大数值标签宽度
+    let maxValueWidth = 0;
+    chartData.forEach(d => {
+        const formattedValue = valueUnit ? 
+            `${d[valueField]}${valueUnit}` : 
+            `${chartUtils.format.autoText(+d[valueField])}`;
+            
+        const textWidth = chartUtils.text.measure(tempSvg, formattedValue, {
+            fontFamily: typography.annotation.font_family,
+            fontSize: typography.annotation.font_size,
+            fontWeight: typography.annotation.font_weight
+        }).width;
+        // *** 修改: 考虑背景padding ***
+        maxValueWidth = Math.max(maxValueWidth, textWidth + 2 * sketchPadding);
+    });
+    // 删除临时SVG
+    tempSvg.remove();
+    
+    // 根据标签宽度调整左边距（添加一些边距）
+    margin.left = Math.max(margin.left, maxLabelWidth + 15); // 增加右侧空间
+    // 根据数值标签宽度调整右边距 (添加一些边距)
+    margin.right = Math.max(margin.right, maxValueWidth + 15);
+    
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 添加数值格式化函数
+    
+    // ---------- 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");
+    
+    // 添加defs用于视觉效果
+    const defs = svg.append("defs");
+    
+    // *** 修改: 使用来自 vertical_group_bar_chart_13 的手绘图案定义 ***
+    // --- Sketch Pattern Definitions ---
+    const patternLeft = defs.append("pattern")
+        .attr("id", "pattern-sketch-left")
+        .attr("width", 8).attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(45)");
+    patternLeft.append("rect").attr("width", 8).attr("height", 8).attr("fill", "#4269d0"); // Default color
+    patternLeft.append("path").attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0").attr("stroke", "#FFFFFF").attr("stroke-width", 0.8);
+
+    const patternRight = defs.append("pattern")
+        .attr("id", "pattern-sketch-right")
+        .attr("width", 8).attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(-45)");
+    patternRight.append("rect").attr("width", 8).attr("height", 8).attr("fill", "#ff725c"); // Default color
+    patternRight.append("path").attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0").attr("stroke", "#FFFFFF").attr("stroke-width", 0.8);
+
+    const patternLabelSketch = defs.append("pattern")
+         .attr("id", "pattern-label-sketch")
+         .attr("width", 8).attr("height", 8)
+         .attr("patternUnits", "userSpaceOnUse")
+         .attr("patternTransform", "rotate(45)");
+     patternLabelSketch.append("rect").attr("width", 8).attr("height", 8).attr("fill", "#FFFFFF");
+     patternLabelSketch.append("path").attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0").attr("stroke", "#CCCCCC").attr("stroke-width", 0.6);
+
+    // ---------- 7. 创建比例尺 ----------
+    
+    // 计算条形的额外间距 - 使用固定值
+    const barPadding = 0.1;
+    
+    // Y轴比例尺（用于维度）- 使用原始顺序
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(barPadding);
+    
+    // X轴比例尺（用于数值）
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(chartData, d => +d[valueField]) || 1]) // Ensure domain starts at 0 and handles empty data
+        .range([0, innerWidth]);
+    
+    // 获取组颜色 - 用于动态更新图案背景色 (可选)
+    function getGroupColor(group) {
+        // 优先使用指定颜色
+        if (colorResolver.field(group, 0, { fallbackKey: "primary" }).value) {
+            return colorResolver.field(group, 0, { fallbackKey: "primary" }).value;
+        }
+        // 如果有可用颜色数组，按索引使用
+        const groupIndex = groups.indexOf(group);
+        const availableColor = colorResolver.available(groupIndex, { cycle: true, usePalette: false }).value;
+        if (availableColor) return availableColor;
+        const primaryColor = colorResolver.other("primary").value;
+        if (primaryColor) {
+             // 可以基于 group 索引生成不同深浅的 primary 颜色
+             // 简单的亮度调整示例
+             const factor = 1 - (groupIndex * 0.15); // 索引越大越暗
+             return chartUtils.color.variant(
+                 chartUtils.color.variant(primaryColor, { mode: "brighter", amount: factor * 0.5 }),
+                 { mode: "darker", amount: factor * 0.2 }
+             ); // 示例调整
+        }
+        // 提供默认 fallback 颜色
+        const defaultColors = ["#4269d0", "#ff725c", "#4CAF50", "#FFC107", "#9C27B0"];
+        return defaultColors[groupIndex % defaultColors.length];
+    }
+    
+    const equalGroupRectWidth = Math.min(innerWidth / groups.length, width * 0.8 / groups.length);
+    chartUtils.legend.labeledStrip(svg, groups.map(group => ({
+        label: group,
+        fill: getGroupColor(group),
+    })), {
+        centerWidth: width,
+        y: height - margin.bottom + 20,
+        itemWidth: equalGroupRectWidth,
+        labelFontFamily: typography.annotation.font_family,
+        numberFontFamily: typography.label.font_family,
+        labelFontSize: 12,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        wrapLabel: (node, label, w) => wrapText(node, label, w, 1.1),
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/horizontal_pictorial_bar_chart_01.js

@@ -0,0 +1,515 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Bar Chart",
+    "chart_name": "horizontal_bar_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 20], [0, 100000]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 300,
+    "min_width": 300,
+    "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);
+
+    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: "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: "#0458A7",
+            secondary: "#6BAFEF",
+            background: "#F0F0F0"
+        }
+    };
+
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_stroke = variables.has_stroke || false;
+
+    d3.select(containerSelector).html("");
+
+    const width = Math.max(variables.width || 300, 860);
+    const height = Math.max(variables.height || 400, 520);
+
+    const xField = chartUtils.schema.channel(jsonData, "x").key || "period";
+    const yField = chartUtils.schema.channel(jsonData, "y").key || "value";
+
+    let xUnit = "";
+    let yUnit = "";
+
+    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;
+    }
+
+    const processedData = chartData.map(d => ({
+        category: d[xField],
+        value: +d[yField]
+    })).filter(d => Number.isFinite(d.value))
+      .sort((a, b) => b.value - a.value);
+
+    const rawTextColor = colorResolver.text({ fallback: colors.text_color || "#10214A" }).value;
+    const primaryColor = colorResolver.other("primary", { fallback: colors.other?.primary || "#0458A7" }).value;
+    const secondaryColor = "#5DA9F6";
+    const fontFamily = typography.label?.font_family || "Arial";
+
+    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 defs = svg.append("defs");
+    const uid = `hbar01_${Math.floor(Math.random() * 1e9)}`;
+    const blueGradient = defs.append("linearGradient")
+        .attr("id", `${uid}_blue`)
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    blueGradient.append("stop").attr("offset", "0%").attr("stop-color", colorResolver.variant(primaryColor, { mode: "darker", amount: 0.45 }) || "#0344A3");
+    blueGradient.append("stop").attr("offset", "100%").attr("stop-color", colorResolver.variant(primaryColor, { mode: "brighter", amount: 0.75 }) || "#1F8BFF");
+
+    const lightBlueGradient = defs.append("linearGradient")
+        .attr("id", `${uid}_light_blue`)
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    lightBlueGradient.append("stop").attr("offset", "0%").attr("stop-color", "#4EA5F5");
+    lightBlueGradient.append("stop").attr("offset", "100%").attr("stop-color", "#8EC8FF");
+
+    const grayGradient = defs.append("linearGradient")
+        .attr("id", `${uid}_gray`)
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    grayGradient.append("stop").attr("offset", "0%").attr("stop-color", "#AAB1BC");
+    grayGradient.append("stop").attr("offset", "100%").attr("stop-color", "#D3D7DE");
+
+    const hasThreePanelLayout = width >= 720;
+    const hasRoomForLegend = width >= 520;
+    const margin = {
+        top: Math.max(12, height * 0.035),
+        right: Math.max(16, width * 0.022),
+        bottom: Math.max(42, height * 0.08),
+        left: Math.max(16, width * 0.026)
+    };
+    const innerW = width - margin.left - margin.right;
+    const innerH = height - margin.top - margin.bottom;
+    const sideGap = hasThreePanelLayout ? Math.max(18, innerW * 0.024) : 0;
+    const leftSlotW = hasThreePanelLayout ? Math.min(230, Math.max(174, innerW * 0.265)) : 0;
+    const rightPanelW = hasThreePanelLayout ? Math.min(128, Math.max(108, innerW * 0.145)) : 0;
+    const chartX = hasThreePanelLayout ? leftSlotW + sideGap : 0;
+    const chartW = hasThreePanelLayout
+        ? Math.max(380, innerW - leftSlotW - rightPanelW - sideGap * 2)
+        : innerW;
+    const legendW = hasThreePanelLayout ? rightPanelW : (hasRoomForLegend ? Math.min(92, innerW * 0.14) : 0);
+    const valueW = Math.min(82, chartW * 0.14);
+    const iconW = Math.min(48, Math.max(36, chartW * 0.075));
+    const labelW = Math.min(156, Math.max(112, chartW * 0.24));
+    const colGap = Math.max(7, chartW * 0.014);
+    const barX = iconW + labelW + colGap * 2;
+    const valueX = chartW - valueW;
+    const barW = Math.max(70, valueX - barX - colGap);
+    const chartH = innerH;
+    const rowStep = chartH / Math.max(1, processedData.length);
+    const rowBand = Math.max(22, rowStep);
+    const barH = Math.max(8, Math.min(22, rowStep * 0.34));
+    const iconR = Math.max(11, Math.min(22, rowStep * 0.34));
+    const labelFont = Math.max(10, Math.min(16, rowStep * 0.28, parseFloat(typography.label?.font_size) || 14));
+    const valueFont = Math.max(11, Math.min(19, rowStep * 0.34));
+    const tickFont = Math.max(8, Math.min(10, labelFont * 0.72));
+
+    const valueMax = d3.max(processedData, d => d.value) || 1;
+    const percentLike = yUnit === "%";
+    const useFullPercentDomain = percentLike && valueMax > 20;
+    const xMax = useFullPercentDomain ? Math.max(100, valueMax) : valueMax;
+    const xScale = d3.scaleLinear()
+        .domain([0, xMax])
+        .range([0, barW]);
+
+    const root = svg.append("g")
+        .attr("class", "horizontal-bar-chart-01")
+        .attr("data-reference-geometry", "left-slot-central-ranked-pill-bars-independent-right-panel")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    if (hasThreePanelLayout) {
+        const leftSlotH = Math.max(220, chartH * 0.72);
+        const leftSlotY = Math.max(6, chartH - leftSlotH - 8);
+        const leftSlot = root.append("g")
+            .attr("class", "reserved-asset-slot horizontal-bar-01-left-image-panel-slot")
+            .attr("data-type", "image-slot")
+            .attr("data-asset-slot", "left-primary-image-panel")
+            .attr("data-reserved-slot", "horizontal_bar_01_left_primary_image_panel")
+            .attr("data-slot-policy", "image2_or_input_asset_reserved_only")
+            .attr("data-asset-source-policy", "image2_asset_or_input_asset;not-template-hardcoded")
+            .attr("data-anchor", "left-body-panel-below-title")
+            .attr("data-bbox", `0,${leftSlotY.toFixed(1)},${leftSlotW.toFixed(1)},${leftSlotH.toFixed(1)}`)
+            .attr("data-bbox-policy", "child rounded rectangle defines visible reserved image panel bbox")
+            .attr("data-mask-policy", "downstream image2/retrieval may replace only inside this visible neutral slot; code emits no embedded raster")
+            .attr("data-collision-rule", "stay left of central ranked chart and below title/subtitle; never overlap bars labels values or right panel")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("transform", `translate(0, ${leftSlotY})`);
+
+        const leftRadius = Math.min(18, leftSlotW * 0.08);
+        leftSlot.append("rect")
+            .attr("class", "left-image-panel-frame")
+            .attr("width", leftSlotW)
+            .attr("height", leftSlotH)
+            .attr("rx", leftRadius)
+            .attr("ry", leftRadius)
+            .attr("fill", "#F2F8FF")
+            .attr("stroke", "#C8DFF5")
+            .attr("stroke-width", 1.4);
+
+        leftSlot.append("rect")
+            .attr("class", "left-image-panel-mask-placeholder")
+            .attr("x", leftSlotW * 0.08)
+            .attr("y", leftSlotH * 0.08)
+            .attr("width", leftSlotW * 0.84)
+            .attr("height", leftSlotH * 0.74)
+            .attr("rx", leftRadius * 0.72)
+            .attr("ry", leftRadius * 0.72)
+            .attr("fill", "#E6F3FF")
+            .attr("stroke", "#9FC9F1")
+            .attr("stroke-width", 1.1)
+            .attr("stroke-dasharray", "7 6")
+            .attr("opacity", 0.84);
+
+        leftSlot.append("path")
+            .attr("class", "left-image-panel-neutral-landform")
+            .attr("d", `M ${leftSlotW * 0.08} ${leftSlotH * 0.63} C ${leftSlotW * 0.26} ${leftSlotH * 0.50}, ${leftSlotW * 0.39} ${leftSlotH * 0.68}, ${leftSlotW * 0.54} ${leftSlotH * 0.56} C ${leftSlotW * 0.70} ${leftSlotH * 0.44}, ${leftSlotW * 0.78} ${leftSlotH * 0.58}, ${leftSlotW * 0.92} ${leftSlotH * 0.48} L ${leftSlotW * 0.92} ${leftSlotH * 0.82} L ${leftSlotW * 0.08} ${leftSlotH * 0.82} Z`)
+            .attr("fill", "#BFE2FF")
+            .attr("opacity", 0.58);
+
+        leftSlot.append("circle")
+            .attr("class", "left-image-panel-neutral-anchor")
+            .attr("cx", leftSlotW * 0.5)
+            .attr("cy", leftSlotH * 0.42)
+            .attr("r", Math.min(leftSlotW, leftSlotH) * 0.07)
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.18);
+
+        leftSlot.append("rect")
+            .attr("class", "left-image-panel-bottom-band")
+            .attr("x", 0)
+            .attr("y", leftSlotH * 0.82)
+            .attr("width", leftSlotW)
+            .attr("height", leftSlotH * 0.18)
+            .attr("rx", leftRadius)
+            .attr("ry", leftRadius)
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.95);
+    }
+
+    const chartGroup = root.append("g")
+        .attr("class", "central-ranked-chart")
+        .attr("data-reference-relationship", "central-ranked-table")
+        .attr("data-anchor", "between-left-image-slot-and-right-art-panel")
+        .attr("transform", `translate(${chartX}, 0)`);
+
+    const rowLayer = chartGroup.append("g").attr("class", "row-layer");
+    const axisY = chartH + Math.min(32, margin.bottom * 0.58);
+
+    const wrapLabel = (text, maxWidth, fontSize, maxLines = 2) => {
+        const words = String(text ?? "").split(/\s+/).filter(Boolean);
+        const maxChars = Math.max(8, Math.floor(maxWidth / (fontSize * 0.55)));
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const next = line ? `${line} ${word}` : word;
+            if (next.length <= maxChars || !line) {
+                line = next;
+            } else {
+                lines.push(line);
+                line = word;
+            }
+        });
+        if (line) lines.push(line);
+        const limited = lines.slice(0, maxLines);
+        if (lines.length > maxLines && limited.length) {
+            const last = limited[limited.length - 1];
+            limited[limited.length - 1] = `${last.slice(0, Math.max(3, maxChars - 1)).trim()}...`;
+        }
+        return limited.length ? limited : [String(text ?? "")];
+    };
+
+    const initials = value => {
+        const cleaned = String(value || "").replace(/\([^)]*\)/g, " ").split(/[^A-Za-z0-9]+/).filter(Boolean);
+        const selected = cleaned.filter(w => !["and", "the", "of", "for", "with"].includes(w.toLowerCase())).slice(0, 2);
+        return (selected.map(w => w[0]).join("") || cleaned.join("").slice(0, 2) || "?").toUpperCase();
+    };
+
+    const isTraditional = category => {
+        const c = String(category).toLowerCase();
+        return c.includes("foot") || c.includes("vehicle") || c.includes("community") || c.includes("aerial");
+    };
+
+    const formatChartNumber = value => {
+        const compactUnit = yUnit === "%" || String(yUnit).startsWith("$");
+        return chartUtils.format.number(value, { unit: yUnit, spaceBeforeUnit: !compactUnit }).text;
+    };
+    const formatValue = d => formatChartNumber(d.value);
+
+    const rows = rowLayer.selectAll(".hbar01-row")
+        .data(processedData)
+        .enter()
+        .append("g")
+        .attr("class", "hbar01-row")
+        .attr("data-category", d => d.category)
+        .attr("data-value", d => d.value)
+        .attr("transform", (d, i) => `translate(0, ${i * rowStep})`);
+
+    rows.append("line")
+        .attr("class", "row-divider")
+        .attr("x1", iconW + colGap * 0.4)
+        .attr("x2", Math.min(valueX + valueW, innerW - legendW - colGap))
+        .attr("y1", rowStep)
+        .attr("y2", rowStep)
+        .attr("stroke", "#DDE7F1")
+        .attr("stroke-width", 1);
+
+    rows.append("circle")
+        .attr("class", "category-icon-slot")
+        .attr("data-asset-slot", "category-icon")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true")
+        .attr("data-anchor", "row-centerline")
+        .attr("data-collision-policy", "stay-left-of-label-column")
+        .attr("cx", iconW * 0.5)
+        .attr("cy", rowStep * 0.5)
+        .attr("r", iconR)
+        .attr("fill", "#EEF6FF")
+        .attr("stroke", "#CDE2F7")
+        .attr("stroke-width", 1.2);
+
+    rows.append("text")
+        .attr("class", "category-icon-initials")
+        .attr("x", iconW * 0.5)
+        .attr("y", rowStep * 0.5)
+        .attr("dy", "0.34em")
+        .attr("text-anchor", "middle")
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(8, iconR * 0.52)}px`)
+        .style("font-weight", 800)
+        .style("fill", primaryColor)
+        .text(d => initials(d.category));
+
+    rows.append("line")
+        .attr("class", "icon-label-divider")
+        .attr("x1", iconW + colGap * 0.55)
+        .attr("x2", iconW + colGap * 0.55)
+        .attr("y1", rowStep * 0.22)
+        .attr("y2", rowStep * 0.78)
+        .attr("stroke", "#D5E1ED")
+        .attr("stroke-width", 1);
+
+    rows.append("text")
+        .attr("class", "category-label")
+        .attr("x", iconW + colGap)
+        .attr("y", rowStep * 0.5)
+        .attr("dominant-baseline", "middle")
+        .style("font-family", fontFamily)
+        .style("font-size", `${labelFont}px`)
+        .style("font-weight", 800)
+        .style("fill", "#0D2147")
+        .each(function(d) {
+            const lines = wrapLabel(d.category, labelW, labelFont, rowStep < 30 ? 1 : 3);
+            const text = d3.select(this);
+            const lineH = labelFont * 1.08;
+            const firstY = -(lines.length - 1) * lineH / 2;
+            lines.forEach((line, index) => {
+                text.append("tspan")
+                    .attr("x", iconW + colGap)
+                    .attr("dy", index === 0 ? firstY : lineH)
+                    .text(line);
+            });
+        });
+
+    rows.append("rect")
+        .attr("class", "bar-track")
+        .attr("x", barX)
+        .attr("y", rowStep * 0.5 - barH / 2)
+        .attr("width", barW)
+        .attr("height", barH)
+        .attr("rx", barH / 2)
+        .attr("ry", barH / 2)
+        .attr("fill", "#EDF2F7");
+
+    rows.append("rect")
+        .attr("class", "bar")
+        .attr("data-mark-shape", "pill-capsule")
+        .attr("data-baseline-edge", "rounded")
+        .attr("data-value-edge", "rounded")
+        .attr("x", barX)
+        .attr("y", rowStep * 0.5 - barH / 2)
+        .attr("width", d => Math.max(barH, xScale(d.value)))
+        .attr("height", barH)
+        .attr("rx", barH / 2)
+        .attr("ry", barH / 2)
+        .attr("fill", (d, i) => {
+            if (i < 4 || String(d.category).toLowerCase().includes("drone")) return `url(#${uid}_blue)`;
+            if (!isTraditional(d.category)) return `url(#${uid}_light_blue)`;
+            return `url(#${uid}_gray)`;
+        });
+
+    rows.append("text")
+        .attr("class", "value-label")
+        .attr("x", valueX + valueW)
+        .attr("y", rowStep * 0.5)
+        .attr("dy", "0.34em")
+        .attr("text-anchor", "end")
+        .style("font-family", fontFamily)
+        .style("font-size", `${valueFont}px`)
+        .style("font-weight", 800)
+        .style("fill", (d, i) => i < 4 ? primaryColor : "#0D2147")
+        .text(formatValue);
+
+    const freeScaleTickCount = Math.max(3, Math.min(5, Math.floor(barW / 90)));
+    const ticks = useFullPercentDomain ? [0, 20, 40, 60, 80, 100] : xScale.ticks(freeScaleTickCount);
+    const axis = chartGroup.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(${barX}, ${axisY})`);
+
+    chartGroup.append("text")
+        .attr("class", "bar-column-heading")
+        .attr("x", barX + barW + valueW)
+        .attr("y", Math.max(0, -margin.top * 0.2))
+        .attr("text-anchor", "end")
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(9, tickFont * 1.08)}px`)
+        .style("font-weight", 800)
+        .style("letter-spacing", "0")
+        .style("fill", primaryColor)
+        .text(String(yField || "Value").replace(/([a-z])([A-Z])/g, "$1 $2").toUpperCase());
+
+    axis.selectAll(".tick-label")
+        .data(ticks)
+        .enter()
+        .append("text")
+        .attr("class", "tick-label")
+        .attr("x", d => xScale(d))
+        .attr("y", 0)
+        .attr("text-anchor", (d, i) => i === 0 ? "start" : (i === ticks.length - 1 ? "end" : "middle"))
+        .style("font-family", fontFamily)
+        .style("font-size", `${tickFont}px`)
+        .style("font-weight", 600)
+        .style("fill", "#7B8AA4")
+        .text(d => formatChartNumber(d));
+
+    if (legendW >= 72) {
+        const panelX = hasThreePanelLayout ? chartX + chartW + sideGap : innerW - legendW;
+        const panelH = hasThreePanelLayout ? Math.max(260, chartH - 10) : Math.min(chartH, Math.max(120, chartH * 0.56));
+        const panelY = hasThreePanelLayout ? 5 : Math.max(4, (chartH - panelH) * 0.08);
+        const legend = root.append("g")
+            .attr("class", "legend-side-panel")
+            .attr("data-reference-relationship", "independent")
+            .attr("data-asset-slot", "side-panel-art")
+            .attr("data-reserved-slot", "horizontal_bar_01_right_art_legend_panel")
+            .attr("data-slot-policy", "image2_asset_reserved_only")
+            .attr("data-asset-source-policy", "image2_asset;not-template-hardcoded")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("data-anchor", "right-safe-column")
+            .attr("data-bbox", `${panelX.toFixed(1)},${panelY.toFixed(1)},${legendW.toFixed(1)},${panelH.toFixed(1)}`)
+            .attr("data-bbox-policy", "child rounded rectangle defines visible right art and legend panel bbox")
+            .attr("data-mask-policy", "downstream image2 may replace only inside the upper reserved art area; code emits no embedded raster")
+            .attr("data-collision-policy", "avoid-value-label-column-and-central-bars")
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        legend.append("rect")
+            .attr("class", "legend-panel-bg")
+            .attr("width", legendW)
+            .attr("height", panelH)
+            .attr("rx", 12)
+            .attr("ry", 12)
+            .attr("fill", "#F2F8FF")
+            .attr("stroke", "#CAE0F6")
+            .attr("stroke-width", 1.2);
+
+        const legendItems = [
+            { label: "High", color: primaryColor },
+            { label: "Mid", color: secondaryColor },
+            { label: "Base", color: "#AAB1BC" }
+        ];
+        const legendBaseY = hasThreePanelLayout ? panelH - 70 : panelH - 58;
+        legend.selectAll(".legend-item")
+            .data(legendItems)
+            .enter()
+            .append("g")
+            .attr("class", "legend-item")
+            .attr("transform", (d, i) => `translate(${Math.max(10, legendW * 0.12)}, ${legendBaseY + i * 18})`)
+            .each(function(d) {
+                const item = d3.select(this);
+                item.append("rect")
+                    .attr("width", 10)
+                    .attr("height", 10)
+                    .attr("rx", 2)
+                    .attr("fill", d.color);
+                item.append("text")
+                    .attr("x", 16)
+                    .attr("y", 9)
+                    .style("font-family", fontFamily)
+                    .style("font-size", `${Math.max(8, tickFont)}px`)
+                    .style("font-weight", 600)
+                    .style("fill", "#25446C")
+                    .text(d.label);
+            });
+
+        legend.append("rect")
+            .attr("class", "side-panel-art-placeholder")
+            .attr("data-asset-slot", "side-panel-art")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true")
+            .attr("x", legendW * 0.18)
+            .attr("y", 22)
+            .attr("width", legendW * 0.64)
+            .attr("height", Math.min(panelH * 0.34, legendW * 1.18))
+            .attr("rx", Math.min(16, legendW * 0.16))
+            .attr("fill", "#DDEEFF")
+            .attr("stroke", "#C4DDF8")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "6 5")
+            .attr("opacity", 0.9);
+
+        legend.append("circle")
+            .attr("class", "side-panel-art-neutral-anchor")
+            .attr("cx", legendW * 0.5)
+            .attr("cy", 22 + Math.min(panelH * 0.34, legendW * 1.18) * 0.48)
+            .attr("r", Math.max(8, legendW * 0.12))
+            .attr("fill", primaryColor)
+            .attr("opacity", 0.16);
+    }
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_bar_chart_07.js

@@ -0,0 +1,489 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart",
+    "chart_name": "vertical_bar_chart_07",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], [0, "inf"]],
+    "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": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用D3.js创建简单的垂直条形图
+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: "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",
+        other: { primary: "#73D2C7", secondary: "#4682B4" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };  // 图片(标志等)
+    const dataColumns = chartUtils.schema.columns(jsonData);            // 数据列
+
+    // 设置视觉效果变量
+    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 || 600;
+
+    // 边距: 上, 右, 下, 左
+    const margin = {
+        top: 60,         // 柱子上方数值标签的空间
+        right: 30,
+        bottom: 150,     // x轴和图标的空间
+        left: 60
+    };
+
+    // 计算实际图表区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 3. 提取字段名称和单位 ----------
+
+    let xField, yField;
+    let xUnit = "", yUnit = "";
+
+    // 安全提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+
+    // 获取字段单位(如果存在)
+    if (xChannel.unit) {
+        xUnit = xChannel.unit;
+    }
+
+    if (yChannel.unit) {
+        yUnit = yChannel.unit;
+    }
+
+    // ---------- 4. 数据处理 ----------
+
+    // 获取唯一的x轴值
+    const xValues = [...new Set(chartData.map(d => d[xField]))];
+
+    // 创建按y值降序排序的数据
+    const sortedData = chartData.map(d => ({
+        x: d[xField],
+        y: +d[yField] // 确保y是数值类型
+    })).sort((a, b) => b.y - a.y);
+
+    // ---------- 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");
+
+    // 获取颜色函数
+    const getColor = () => colorResolver.other("primary").value;
+
+    // 如果需要创建阴影滤镜
+    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");
+    }
+
+    // 如果需要创建渐变
+    if (variables.has_gradient) {
+        sortedData.forEach((item, idx) => {
+            // 添加安全的ID处理
+            const safeCategory = typeof item.x === 'string' ?
+                item.x.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+                `category-${idx}`;
+
+            const baseColor = getColor();
+            const gradientId = `gradient-${safeCategory}`;
+
+            const gradient = defs.append("linearGradient")
+                .attr("id", gradientId)
+                .attr("x1", "0%")
+                .attr("y1", "100%")
+                .attr("x2", "0%")
+                .attr("y2", "0%");
+
+            gradient.append("stop")
+                .attr("offset", "0%")
+                .attr("stop-color", colorResolver.variant(baseColor, { mode: "darker", amount: 0.1 }));
+
+            gradient.append("stop")
+                .attr("offset", "100%")
+                .attr("stop-color", colorResolver.variant(baseColor, { mode: "brighter", amount: 0.1 }));
+        });
+    }
+
+    // ---------- 7. 创建图表 ----------
+
+    // 创建图表组
+    const chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // 创建比例尺
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d.x))
+        .range([0, innerWidth])
+        .padding(variables.has_spacing ? 0.4 : 0.2);
+
+    const yMax = d3.max(sortedData, d => d.y);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax > 0 ? yMax * 1.1 : 1]) // 处理y都为0的情况，并添加10%的填充
+        .range([innerHeight, 0]);
+
+    // 添加数值格式化函数
+
+    // *******************************************************************
+    // ** 开始修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+    const defaultLabelFontSize = parseFloat(typography.label.font_size || 12);
+    const minLabelFontSize = 10; // 最小字体大小
+    const currentBarWidth = xScale.bandwidth(); // 使用实际的bar宽度
+    let finalLabelFontSize = defaultLabelFontSize;
+    let maxLinesNeeded = 1; // 记录所有标签所需的最大行数
+    const labelFontFamily = typography.label.font_family || "Arial";
+    const labelFontWeight = typography.label.font_weight || "normal";
+    const lineHeightFactor = 1.2; // 行高倍数
+
+    // 文本宽度测量辅助函数 (使用 canvas 提高性能)
+    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);
+    }
+
+    // 第一遍计算：确定统一的字体大小
+    if (currentBarWidth > 0) { // 确保 barWidth 有效
+        let maxRatio = 1;
+        sortedData.forEach(d => {
+            const labelText = String(d.x); // 确保是字符串
+            const textWidth = measureTextWidth(labelText, labelFontFamily, defaultLabelFontSize, labelFontWeight);
+            const ratio = textWidth / currentBarWidth;
+            if (ratio > maxRatio) {
+                maxRatio = ratio;
+            }
+        });
+
+        if (maxRatio > 1) {
+            finalLabelFontSize = Math.max(minLabelFontSize, Math.floor(defaultLabelFontSize / maxRatio));
+        }
+
+        // 第二遍计算：确定是否需要换行以及最大行数 (使用最终字体大小)
+        sortedData.forEach(d => {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+
+            if (textWidth > currentBarWidth) {
+                // 模拟换行计算行数
+                const words = labelText.split(/\s+/); // 按空格分词
+                let currentLine = '';
+                let lines = 1;
+                let simulationSuccess = false; // 标记模拟是否成功
+
+                if (words.length > 1) { // 优先按单词换行
+                    for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = words[i];
+                            // 检查单个单词是否也超长
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth) {
+                                // 单个单词超长，需要转字符换行
+                                simulationSuccess = false;
+                                break; // 退出单词循环
+                            }
+                        } else {
+                            currentLine = testLine;
+                        }
+                    }
+                     if(currentLine !== '') simulationSuccess = true; // 如果有剩余单词则标记成功
+
+                }
+
+                // 如果单词换行不成功或只有一个单词，尝试字符换行
+                if(words.length <= 1 || !simulationSuccess) {
+                    lines = 1; // 重置行数
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = chars[i];
+                        } else {
+                            currentLine += chars[i];
+                        }
+                    }
+                }
+
+
+                if (lines > maxLinesNeeded) {
+                    maxLinesNeeded = lines;
+                }
+            }
+        });
+    } else {
+        // 如果barWidth无效，则使用默认字体大小且不换行
+        finalLabelFontSize = defaultLabelFontSize;
+        maxLinesNeeded = 1;
+    }
+    // *******************************************************************
+    // ** 结束修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+
+    // *******************************************************************
+    // ** 开始修改：计算图标的统一Y位置 **
+    // *******************************************************************
+    const labelStartY = innerHeight + 10; // 标签开始的 Y 位置 (靠近柱子底部)
+    const lineHeight = finalLabelFontSize * lineHeightFactor; // 行高
+    const labelBottomApprox = labelStartY + (maxLinesNeeded - 1) * lineHeight + finalLabelFontSize * 0.71; // 估算最下方标签基线位置
+    const iconRadius = 15; // 图标半径
+    const iconYPosition = labelBottomApprox + iconRadius + 5; // 在标签下方留出 5px 间距放置图标中心
+    const iconBottomY = iconYPosition + iconRadius; // 图标底部的Y坐标
+    const barExtensionBuffer = 5; // 柱子比图标底部多延伸的距离
+    const barBottomY = iconBottomY + barExtensionBuffer; // 柱子需要延伸到的最终Y坐标
+    // *******************************************************************
+    // ** 结束修改：计算图标的统一Y位置 **
+    // *******************************************************************
+
+    // 添加柱子 (修改高度)
+    chart.selectAll(".bar")
+        .data(sortedData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("x", d => xScale(d.x))
+        .attr("y", d => yScale(d.y))
+        .attr("width", xScale.bandwidth())
+        // 修改: 使柱子高度只取决于数据值和yScale
+        .attr("height", d => Math.max(0, innerHeight - yScale(d.y)))
+        .attr("fill", d => {
+            if (variables.has_gradient) {
+                const safeCategory = typeof d.x === 'string' ?
+                    d.x.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+                    `category-${sortedData.findIndex(item => item.x === d.x)}`; // 修正: 使用 findIndex 确保唯一性
+                return `url(#gradient-${safeCategory})`;
+            }
+            return getColor();
+        })
+        .attr("rx", variables.has_rounded_corners ? 4 : 0)
+        .attr("ry", variables.has_rounded_corners ? 4 : 0)
+        .style("stroke", variables.has_stroke ? "#333" : "none")
+        .style("stroke-width", variables.has_stroke ? 1 : 0)
+        .style("filter", variables.has_shadow ? "url(#shadow)" : "none")
+        .on("mouseover", function() {
+            d3.select(this).attr("opacity", 0.8);
+        })
+        .on("mouseout", function() {
+            d3.select(this).attr("opacity", 1);
+        });
+
+    // 在柱子上方添加数值标签
+    const defaultAnnotationFontSize = parseFloat(typography.annotation.font_size || 12);
+    const minAnnotationFontSize = 6; // 数值标签最小字体
+    const annotationFontFamily = typography.annotation.font_family || "Arial";
+    const annotationFontWeight = typography.annotation.font_weight || "bold";
+
+    chart.selectAll(".value-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "value-label")
+        .attr("x", d => xScale(d.x) + xScale.bandwidth() / 2)
+        .attr("y", d => yScale(d.y) - 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFontFamily)
+        .style("font-weight", annotationFontWeight)
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .each(function(d) {
+            const valueText = chartUtils.format.autoText(d.y) + (yUnit || "");
+            const maxWidth = xScale.bandwidth() * 1.1; // 最大允许宽度为柱宽的1.1倍
+            let finalValueFontSize = defaultAnnotationFontSize;
+
+            if (maxWidth > 0) { // 仅当宽度有效时计算
+                const textWidth = measureTextWidth(valueText, annotationFontFamily, defaultAnnotationFontSize, annotationFontWeight);
+                if (textWidth > maxWidth) {
+                    finalValueFontSize = Math.max(minAnnotationFontSize, Math.floor(defaultAnnotationFontSize * (maxWidth / textWidth)));
+                }
+            }
+
+            d3.select(this)
+                .style("font-size", `${finalValueFontSize}px`)
+                .text(valueText);
+        });
+
+    // 在维度标签上方添加水平线
+    chart.append("line")
+        .attr("x1", 0)
+        .attr("y1", innerHeight + 20) // 直接位于维度标签上方的位置
+        .attr("x2", innerWidth)
+        .attr("y2", innerHeight + 20)
+        .attr("stroke", "#e0e0e0")
+        .attr("stroke-width", 1);
+
+    // *******************************************************************
+    // ** 开始修改：添加维度标签 (统一字体大小，自动换行) **
+    // *******************************************************************
+    chart.selectAll(".dimension-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "dimension-label")
+        .attr("text-anchor", "middle")
+        .style("font-family", labelFontFamily)
+        .style("font-size", `${finalLabelFontSize}px`) // 应用预计算的字体大小
+        .style("font-weight", labelFontWeight)
+        .style("fill", "#ffffff") // 使用默认文本颜色
+        .each(function(d) {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+            const textElement = d3.select(this);
+            const xPos = xScale(d.x) + xScale.bandwidth() / 2;
+            const availableWidth = xScale.bandwidth();
+
+            if (textWidth > availableWidth && availableWidth > 0) {
+                // 需要换行 (重复之前的换行逻辑来渲染)
+                const words = labelText.split(/\s+/);
+                let lines = [];
+                let currentLine = '';
+                let simulationSuccess = false;
+
+                if(words.length > 1){
+                     for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > availableWidth && currentLine !== '') {
+                            lines.push(currentLine);
+                            currentLine = words[i];
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth) {
+                                simulationSuccess = false; break;
+                            }
+                        } else { currentLine = testLine; }
+                    }
+                    if(currentLine !== '') { lines.push(currentLine); simulationSuccess = true; }
+                }
+                 if(words.length <= 1 || !simulationSuccess) {
+                    lines = [];
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth && currentLine !== '') {
+                            lines.push(currentLine); currentLine = chars[i];
+                        } else { currentLine += chars[i]; }
+                    }
+                     lines.push(currentLine);
+                 }
+
+                lines.forEach((line, i) => {
+                    textElement.append("tspan")
+                        .attr("x", xPos)
+                        .attr("y", labelStartY + i * lineHeight)
+                        .attr("dy", "0.71em")
+                        .text(line);
+                });
+            } else {
+                // 不需要换行
+                textElement.append("tspan")
+                   .attr("x", xPos)
+                   .attr("y", labelStartY)
+                   .attr("dy", "0.71em")
+                   .text(labelText);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加维度标签 **
+    // *******************************************************************
+
+
+    // *******************************************************************
+    // ** 开始修改：添加图标 (移除圆形) - 动态调整 Y 位置 **
+    // *******************************************************************
+    chart.selectAll(".icon-group") // 修改类名以反映不再是圆形
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "icon-group") // 修改类名
+        .attr("transform", d => `translate(${xScale(d.x) + xScale.bandwidth() / 2}, ${iconYPosition})`) // 应用动态Y位置
+        .each(function(d) {
+
+            if (images && images.field && images.field[d.x]) {
+                d3.select(this)
+                    .append("image")
+                    .attr("xlink:href", images.field[d.x])
+                    .attr("x", -12)
+                    .attr("y", -12)
+                    .attr("width", 24)
+                    .attr("preserveAspectRatio","xMidYMid meet")
+                    .attr("height", 24);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加图标 **
+    // *******************************************************************
+
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_bar_chart_08.js

@@ -0,0 +1,529 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart",
+    "chart_name": "vertical_bar_chart_08",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "overlay",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 使用D3.js创建简单的垂直条形图
+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: "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",
+        other: { primary: "#73D2C7", secondary: "#4682B4" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };  // 图片(标志等)
+    const dataColumns = chartUtils.schema.columns(jsonData);            // 数据列
+
+    // 设置视觉效果变量
+    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 || 600;
+
+    // 边距: 上, 右, 下, 左
+    const margin = {
+        top: 60,         // 柱子上方数值标签的空间
+        right: 30,
+        bottom: 150,     // x轴和图标的空间
+        left: 60
+    };
+
+    // 计算实际图表区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 3. 提取字段名称和单位 ----------
+
+    let xField, yField;
+    let xUnit = "", yUnit = "";
+
+    // 安全提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+
+    // 获取字段单位(如果存在)
+    if (xChannel.unit) {
+        xUnit = xChannel.unit;
+    }
+
+    if (yChannel.unit) {
+        yUnit = yChannel.unit;
+    }
+
+    // ---------- 4. 数据处理 ----------
+
+    // 获取唯一的x轴值
+    const xValues = [...new Set(chartData.map(d => d[xField]))];
+
+    // 创建按y值降序排序的数据
+    const sortedData = chartData.map(d => ({
+        x: d[xField],
+        y: +d[yField] // 确保y是数值类型
+    })).sort((a, b) => b.y - a.y);
+
+    // ---------- 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");
+
+    // *** BEGIN REMOVAL: Remove stripe pattern generation ***
+    // const patternDensity = 6;
+    // const patternStrokeWidth = 1.5;
+    // sortedData.forEach((item, idx) => {
+    //     const dimension = item.x;
+    //     let barColor = colorResolver.other("primary").value;
+    //     if (colorResolver.field(dimension, 0, { fallbackKey: "primary" }).value) {
+    //         barColor = colorResolver.field(dimension, 0, { fallbackKey: "primary" }).value;
+    //     }
+    //     const safeCategory = typeof dimension === 'string' ?
+    //         dimension.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+    //         `category-${idx}`;
+    //     const patternId = `pattern-stripe-${safeCategory}`;
+    //     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", barColor)
+    //         .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);
+    // });
+    // *** END REMOVAL ***
+
+    // *** BEGIN ADDITION: Define vertical gradient per category ***
+    sortedData.forEach((item, idx) => {
+        const dimension = item.x;
+        let barColor = colorResolver.other("primary").value; // Default color
+        if (colorResolver.field(dimension, 0, { fallbackKey: "primary" }).value) {
+            barColor = colorResolver.field(dimension, 0, { fallbackKey: "primary" }).value; // Use specific color if available
+        }
+
+        // Create safe ID for the gradient
+        const safeCategory = typeof dimension === 'string' ?
+            dimension.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+            `category-${idx}`;
+        const gradientId = `gradient-${safeCategory}`;
+
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "100%") // Bottom
+            .attr("x2", "0%")
+            .attr("y2", "0%");  // Top
+
+        // Darker color at the bottom
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(barColor, { mode: "darker", amount: 0.5 })); // Adjust factor as needed
+
+        // Lighter color at the top
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(barColor, { mode: "brighter", amount: 0.5 })); // Adjust factor as needed
+    });
+    // *** END ADDITION ***
+
+    // 如果需要创建阴影滤镜
+    // 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})`);
+
+    // 创建比例尺
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d.x))
+        .range([0, innerWidth])
+        .padding(variables.has_spacing ? 0.4 : 0.2);
+
+    const yMax = d3.max(sortedData, d => d.y);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax > 0 ? yMax * 1.1 : 1]) // 处理y都为0的情况，并添加10%的填充
+        .range([innerHeight, 0]);
+
+    // *******************************************************************
+    // ** 开始修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+    const defaultLabelFontSize = parseFloat(typography.label.font_size || 12);
+    const minLabelFontSize = 10; // 最小字体大小
+    const currentBarWidth = xScale.bandwidth(); // 使用实际的bar宽度
+    let finalLabelFontSize = defaultLabelFontSize;
+    let maxLinesNeeded = 1; // 记录所有标签所需的最大行数
+    const labelFontFamily = typography.label.font_family || "Arial";
+    const labelFontWeight = typography.label.font_weight || "normal";
+    const lineHeightFactor = 1.2; // 行高倍数
+
+    // 文本宽度测量辅助函数 (使用 canvas 提高性能)
+    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);
+    }
+
+    // 第一遍计算：确定统一的字体大小
+    if (currentBarWidth > 0) { // 确保 barWidth 有效
+        let maxRatio = 1;
+        sortedData.forEach(d => {
+            const labelText = String(d.x); // 确保是字符串
+            const textWidth = measureTextWidth(labelText, labelFontFamily, defaultLabelFontSize, labelFontWeight);
+            const ratio = textWidth / currentBarWidth;
+            if (ratio > maxRatio) {
+                maxRatio = ratio;
+            }
+        });
+
+        if (maxRatio > 1) {
+            finalLabelFontSize = Math.max(minLabelFontSize, Math.floor(defaultLabelFontSize / maxRatio));
+        }
+
+        // 第二遍计算：确定是否需要换行以及最大行数 (使用最终字体大小)
+        sortedData.forEach(d => {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+
+            if (textWidth > currentBarWidth) {
+                // 模拟换行计算行数
+                const words = labelText.split(/\s+/); // 按空格分词
+                let currentLine = '';
+                let lines = 1;
+                let simulationSuccess = false; // 标记模拟是否成功
+
+                if (words.length > 1) { // 优先按单词换行
+                    for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = words[i];
+                            // 检查单个单词是否也超长
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth) {
+                                // 单个单词超长，需要转字符换行
+                                simulationSuccess = false;
+                                break; // 退出单词循环
+                            }
+                        } else {
+                            currentLine = testLine;
+                        }
+                    }
+                     if(currentLine !== '') simulationSuccess = true; // 如果有剩余单词则标记成功
+
+                }
+
+                // 如果单词换行不成功或只有一个单词，尝试字符换行
+                if(words.length <= 1 || !simulationSuccess) {
+                    lines = 1; // 重置行数
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > currentBarWidth && currentLine !== '') {
+                            lines++;
+                            currentLine = chars[i];
+                        } else {
+                            currentLine += chars[i];
+                        }
+                    }
+                }
+
+
+                if (lines > maxLinesNeeded) {
+                    maxLinesNeeded = lines;
+                }
+            }
+        });
+    } else {
+        // 如果barWidth无效，则使用默认字体大小且不换行
+        finalLabelFontSize = defaultLabelFontSize;
+        maxLinesNeeded = 1;
+    }
+    // *******************************************************************
+    // ** 结束修改：预计算标签字体大小和最大行数 **
+    // *******************************************************************
+
+    // *******************************************************************
+    // ** 开始修改：计算图标的统一Y位置 **
+    // *******************************************************************
+    const labelStartY = innerHeight + 10; // 标签开始的 Y 位置 (靠近柱子底部)
+    const lineHeight = finalLabelFontSize * lineHeightFactor; // 行高
+    const labelBottomApprox = labelStartY + (maxLinesNeeded - 1) * lineHeight + finalLabelFontSize * 0.71; // 估算最下方标签基线位置
+    const iconRadius = 15; // 图标半径
+    const iconYPosition = labelBottomApprox + iconRadius + 5; // 在标签下方留出 5px 间距放置图标中心
+    const iconBottomY = iconYPosition + iconRadius; // 图标底部的Y坐标
+    const barExtensionBuffer = 5; // 柱子比图标底部多延伸的距离
+    const barBottomY = iconBottomY + barExtensionBuffer; // 柱子需要延伸到的最终Y坐标
+    // *******************************************************************
+    // ** 结束修改：计算图标的统一Y位置 **
+    // *******************************************************************
+
+    // 添加柱子 (修改高度)
+    chart.selectAll(".bar")
+        .data(sortedData)
+        .enter()
+        .append("rect")
+        .attr("class", "bar")
+        .attr("x", d => xScale(d.x))
+        .attr("y", d => yScale(d.y))
+        .attr("width", xScale.bandwidth())
+        // 修改: 使柱子高度只取决于数据值和yScale
+        .attr("height", d => Math.max(0, innerHeight - yScale(d.y)))
+        // *** BEGIN MODIFICATION: Apply specific gradient fill ***
+        .attr("fill", d => {
+             const dimension = d.x;
+             const safeCategory = typeof dimension === 'string' ?
+                dimension.toString().replace(/[^a-zA-Z0-9]/g, '-').toLowerCase() :
+                `category-${sortedData.findIndex(item => item.x === dimension)}`;
+             const gradientId = `gradient-${safeCategory}`;
+             return `url(#${gradientId})`;
+        })
+        // *** END MODIFICATION ***
+        // *** BEGIN MODIFICATION: Force rounded corners ***
+        .attr("rx", 4) // Force rounded corners
+        .attr("ry", 4) // Force rounded corners
+        // *** END MODIFICATION ***
+        .style("stroke", variables.has_stroke ? "#333" : "none")
+        .style("stroke-width", variables.has_stroke ? 1 : 0)
+        .style("filter", variables.has_shadow ? "url(#shadow)" : "none")
+        .on("mouseover", function() {
+            d3.select(this).attr("opacity", 0.8);
+        })
+        .on("mouseout", function() {
+            d3.select(this).attr("opacity", 1);
+        });
+
+    // 在柱子上方添加数值标签
+    const defaultAnnotationFontSize = parseFloat(typography.annotation.font_size || 12);
+    const minAnnotationFontSize = 6; // 数值标签最小字体
+    const annotationFontFamily = typography.annotation.font_family || "Arial";
+    const annotationFontWeight = typography.annotation.font_weight || "bold";
+
+    // 添加数值格式化函数
+
+    chart.selectAll(".value-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "value-label")
+        .attr("x", d => xScale(d.x) + xScale.bandwidth() / 2)
+        .attr("y", d => yScale(d.y) - 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFontFamily)
+        .style("font-weight", annotationFontWeight)
+        .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+        .each(function(d) {
+            const valueText = `${chartUtils.format.autoText(d.y)}${yUnit}`;
+            const maxWidth = xScale.bandwidth() * 1.1; // 最大允许宽度为柱宽的1.1倍
+            let finalValueFontSize = defaultAnnotationFontSize;
+
+            if (maxWidth > 0) { // 仅当宽度有效时计算
+                const textWidth = measureTextWidth(valueText, annotationFontFamily, defaultAnnotationFontSize, annotationFontWeight);
+                if (textWidth > maxWidth) {
+                    finalValueFontSize = Math.max(minAnnotationFontSize, Math.floor(defaultAnnotationFontSize * (maxWidth / textWidth)));
+                }
+            }
+
+            d3.select(this)
+                .style("font-size", `${finalValueFontSize}px`)
+                .text(valueText);
+        });
+
+    // 在维度标签上方添加水平线
+    chart.append("line")
+        .attr("x1", 0)
+        .attr("y1", innerHeight + 20) // 直接位于维度标签上方的位置
+        .attr("x2", innerWidth)
+        .attr("y2", innerHeight + 20)
+        .attr("stroke", "#e0e0e0")
+        .attr("stroke-width", 1);
+
+    // *******************************************************************
+    // ** 开始修改：添加维度标签 (统一字体大小，自动换行) **
+    // *******************************************************************
+    chart.selectAll(".dimension-label")
+        .data(sortedData)
+        .enter()
+        .append("text")
+        .attr("class", "dimension-label")
+        .attr("text-anchor", "middle")
+        .style("font-family", labelFontFamily)
+        .style("font-size", `${finalLabelFontSize}px`) // 应用预计算的字体大小
+        .style("font-weight", labelFontWeight)
+        .style("fill", "#ffffff") // 使用默认文本颜色
+        .each(function(d) {
+            const labelText = String(d.x);
+            const textWidth = measureTextWidth(labelText, labelFontFamily, finalLabelFontSize, labelFontWeight);
+            const textElement = d3.select(this);
+            const xPos = xScale(d.x) + xScale.bandwidth() / 2;
+            const availableWidth = xScale.bandwidth();
+
+            if (textWidth > availableWidth && availableWidth > 0) {
+                // 需要换行 (重复之前的换行逻辑来渲染)
+                const words = labelText.split(/\s+/);
+                let lines = [];
+                let currentLine = '';
+                let simulationSuccess = false;
+
+                if(words.length > 1){
+                     for (let i = 0; i < words.length; i++) {
+                        const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+                        const testWidth = measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight);
+                        if (testWidth > availableWidth && currentLine !== '') {
+                            lines.push(currentLine);
+                            currentLine = words[i];
+                            if (measureTextWidth(currentLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth) {
+                                simulationSuccess = false; break;
+                            }
+                        } else { currentLine = testLine; }
+                    }
+                    if(currentLine !== '') { lines.push(currentLine); simulationSuccess = true; }
+                }
+                 if(words.length <= 1 || !simulationSuccess) {
+                    lines = [];
+                    const chars = labelText.split('');
+                    currentLine = '';
+                    for (let i = 0; i < chars.length; i++) {
+                        const testLine = currentLine + chars[i];
+                        if (measureTextWidth(testLine, labelFontFamily, finalLabelFontSize, labelFontWeight) > availableWidth && currentLine !== '') {
+                            lines.push(currentLine); currentLine = chars[i];
+                        } else { currentLine += chars[i]; }
+                    }
+                     lines.push(currentLine);
+                 }
+
+                lines.forEach((line, i) => {
+                    textElement.append("tspan")
+                        .attr("x", xPos)
+                        .attr("y", labelStartY + i * lineHeight)
+                        .attr("dy", "0.71em")
+                        .text(line);
+                });
+            } else {
+                // 不需要换行
+                textElement.append("tspan")
+                   .attr("x", xPos)
+                   .attr("y", labelStartY)
+                   .attr("dy", "0.71em")
+                   .text(labelText);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加维度标签 **
+    // *******************************************************************
+
+
+    // *******************************************************************
+    // ** 开始修改：添加图标 (移除圆形) - 动态调整 Y 位置 **
+    // *******************************************************************
+    chart.selectAll(".icon-group") // 修改类名以反映不再是圆形
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "icon-group") // 修改类名
+        .attr("transform", d => `translate(${xScale(d.x) + xScale.bandwidth() / 2}, ${iconYPosition})`) // 应用动态Y位置
+        .each(function(d) {
+
+            if (images && images.field && images.field[d.x]) {
+                d3.select(this)
+                    .append("image")
+                    .attr("xlink:href", images.field[d.x])
+                    .attr("x", -12)
+                    .attr("y", -12)
+                    .attr("width", 24)
+                    .attr("preserveAspectRatio","xMidYMid meet")
+                    .attr("height", 24);
+            }
+        });
+    // *******************************************************************
+    // ** 结束修改：添加图标 **
+    // *******************************************************************
+
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_bar_chart_12.js

@@ -0,0 +1,856 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart",
+    "chart_name": "vertical_bar_chart_12",
+    "is_composite": true,
+    "required_fields": [["x", "y"], ["x", "y2"]],
+    "required_fields_type": [
+        [["categorical"], ["numerical"]],
+        [["categorical"], ["numerical"]]
+    ],
+    "required_fields_range": [
+        [[2, 30], ["-inf", "inf"]],
+        [[2, 30], [0, "inf"]]
+    ],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": ["primary","secondary"],
+    "supported_effects": ["radius_corner", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, dataJSON) {
+    const jsonData = dataJSON || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const rawDataBlock = jsonData.data || {};
+    const dataBlock = Array.isArray(rawDataBlock)
+        ? { data: rawDataBlock, columns: jsonData.columns || [] }
+        : rawDataBlock;
+    const sourceRows = dataBlock.data || [];
+    const columns = dataBlock.columns || jsonData.columns || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const y2Column = Array.from(columns).find(c => c["role"] === "y2")
+        || Array.from(columns).find(c => c !== xColumn && c !== yColumn && c.data_type === "numerical")
+        || columns[2] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const y2Field = y2Column.name;
+
+    const width = Math.max(580, Number(variables.width) || 640);
+    const height = Math.max(860, Number(variables.height) || 900);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const titleFamily = typography.title?.font_family || fontFamily;
+    const annotationFamily = typography.annotation?.font_family || fontFamily;
+    const darkText = sourceColors.text_color || "#08255a";
+    const mutedText = "#53657a";
+    const navy = "#08245c";
+    const blue = sourceColors.other?.secondary || "#0b82c8";
+    const red = sourceColors.other?.primary || "#b9152d";
+    const palette = sourceColors.available_colors?.length
+        ? sourceColors.available_colors
+        : [red, "#159f9b", "#12a84f", "#5cb33e", "#7350a6", "#f3b719", "#1f77b4", "#f97316"];
+    const labelSize = Math.max(8.5, Math.min(11.5, parseFloat(typography.label?.font_size) || 10));
+    const valueSize = Math.max(8.5, Math.min(12, parseFloat(typography.annotation?.font_size) || 10));
+    const yUnit = yColumn.unit === "none" ? "" : (yColumn.unit || "");
+    const y2Unit = y2Column.unit === "none" ? "" : (y2Column.unit || "");
+
+    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")
+        .attr("class", "vertical-bar-chart-12 vertical-bar-chart-12-reference-layout");
+
+    const defs = svg.append("defs");
+    const pageGradient = defs.append("linearGradient")
+        .attr("id", "vb12-page-gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    pageGradient.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    pageGradient.append("stop").attr("offset", "62%").attr("stop-color", "#fbfdff");
+    pageGradient.append("stop").attr("offset", "100%").attr("stop-color", "#e5f5ff");
+
+    const barGradient = defs.append("linearGradient")
+        .attr("id", "vb12-bar-highlight")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "100%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", "rgba(255,255,255,0.26)");
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", "rgba(0,0,0,0.10)");
+
+    const cardShadow = defs.append("filter")
+        .attr("id", "vb12-card-shadow")
+        .attr("x", "-20%")
+        .attr("y", "-20%")
+        .attr("width", "140%")
+        .attr("height", "150%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#7bb9df")
+        .attr("flood-opacity", 0.18);
+
+    svg.append("rect")
+        .attr("class", "chart-canvas reference-page-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#vb12-page-gradient)");
+
+    svg.append("path")
+        .attr("class", "top-background-wave")
+        .attr("d", `M${width * 0.48},0 C${width * 0.62},${height * 0.04} ${width * 0.72},${height * 0.02} ${width},${height * 0.09} L${width},0 Z`)
+        .attr("fill", "#dff0fb");
+
+    svg.append("path")
+        .attr("class", "bottom-wave wave-back")
+        .attr("d", `M0 ${height - 62} C${width * 0.18} ${height - 90},${width * 0.36} ${height - 42},${width * 0.52} ${height - 68} S${width * 0.82} ${height - 96},${width} ${height - 56} L${width} ${height} L0 ${height} Z`)
+        .attr("fill", "#dceffd");
+    svg.append("path")
+        .attr("class", "bottom-wave wave-front")
+        .attr("d", `M0 ${height - 36} C${width * 0.18} ${height - 58},${width * 0.40} ${height - 12},${width * 0.60} ${height - 38} S${width * 0.83} ${height - 68},${width} ${height - 28} L${width} ${height} L0 ${height} Z`)
+        .attr("fill", "#55ace5");
+    svg.append("path")
+        .attr("class", "bottom-wave wave-deep")
+        .attr("d", `M0 ${height - 18} C${width * 0.24} ${height - 40},${width * 0.44} ${height + 8},${width * 0.70} ${height - 22} C${width * 0.84} ${height - 38},${width * 0.92} ${height - 22},${width} ${height - 30} L${width} ${height} L0 ${height} Z`)
+        .attr("fill", "#1594d2");
+
+    function message(text) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", darkText)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text(text);
+        return svg.node();
+    }
+
+    if (!xField || !yField || !y2Field) return message("Missing vertical bar fields");
+
+    function readableLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const months = {
+            jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+            may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+            sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+        };
+        const seasons = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+        if (months[lower] != null) return months[lower];
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return Number(match[1]) * 10000;
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return Number(match[1]) * 10000 + Number(match[2]) * 100 + Number(match[3] || 1);
+        match = text.match(/^Q([1-4])\s+(-?\d{4})$/i) || text.match(/^(-?\d{4})\s+Q([1-4])$/i);
+        if (match && text.toUpperCase().startsWith("Q")) return Number(match[2]) * 10 + Number(match[1]);
+        if (match) return Number(match[1]) * 10 + Number(match[2]);
+        match = text.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{4})$/i);
+        if (match) return Number(match[2]) * 10 + seasons[match[1].toLowerCase()];
+        match = text.match(/^(-?\d{4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (match) return Number(match[1]) * 10 + seasons[match[2].toLowerCase()];
+        return NaN;
+    }
+
+    function parseOrdinalRank(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        const named = {
+            primary: 1, elementary: 1, secondary: 2, college: 3, university: 3,
+            low: 1, lower: 1, medium: 2, moderate: 2, high: 3, higher: 3,
+            children: 1, adolescents: 2, teens: 2, adults: 3, seniors: 4
+        };
+        if (named[text] != null) return named[text];
+        let match = text.match(/(?:less than|under)\s*[$]?\s*([\d,]+)/);
+        if (match) return Number(match[1].replace(/,/g, "")) - 0.5;
+        match = text.match(/(?:more than|over)\s*[$]?\s*([\d,]+)/);
+        if (match) return Number(match[1].replace(/,/g, "")) + 0.5;
+        match = text.match(/^[$]?\s*([\d,]+(?:\.\d+)?)\s*(?:-|to)/);
+        if (match) return Number(match[1].replace(/,/g, ""));
+        match = text.match(/^(-?\d+(?:\.\d+)?)/);
+        if (match) return Number(match[1]);
+        return NaN;
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, unit = "") {
+        const numeric = Number(value);
+        const formatted = compactNumber(numeric);
+        if (!unit) return formatted;
+        if (unit === "%") return `${formatted}%`;
+        if (unit.startsWith("$")) {
+            const sign = numeric < 0 ? "-" : "";
+            return `${sign}$${compactNumber(Math.abs(numeric))}${unit.slice(1)}`;
+        }
+        if (unit.length <= 3 && /^[^A-Za-z0-9]+$/.test(unit)) return `${unit}${formatted}`;
+        return `${formatted} ${unit}`;
+    }
+
+    function fitText(value, maxChars) {
+        const text = readableLabel(value);
+        if (text.length <= maxChars) return text;
+        return text.slice(0, Math.max(1, maxChars)).trim();
+    }
+
+    function wrapLines(value, maxChars, maxLines = 2) {
+        const words = readableLabel(value).split(/\s+/).filter(Boolean);
+        if (!words.length) return [""];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const shortWord = word.length > maxChars ? word.slice(0, maxChars) : word;
+            const next = current ? `${current} ${shortWord}` : shortWord;
+            if (next.length <= maxChars) {
+                current = next;
+            } else {
+                if (current) lines.push(current);
+                current = shortWord;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length <= maxLines) return lines;
+        return lines.slice(0, maxLines).map(line => fitText(line, maxChars));
+    }
+
+    const grouped = new Map();
+    sourceRows.forEach((row, index) => {
+        const category = readableLabel(row[xField]);
+        const yValue = Number(row[yField]);
+        const y2Value = Number(row[y2Field]);
+        if (!category || !Number.isFinite(yValue) || !Number.isFinite(y2Value)) return;
+        if (!grouped.has(category)) {
+            grouped.set(category, {
+                category,
+                rawCategory: row[xField],
+                firstIndex: index,
+                y: 0,
+                y2: 0
+            });
+        }
+        const entry = grouped.get(category);
+        entry.y += yValue;
+        entry.y2 += Math.max(0, y2Value);
+    });
+
+    const rows = Array.from(grouped.values()).map((row, index) => ({
+        ...row,
+        originalIndex: index,
+        temporalRank: parseTemporalRank(row.rawCategory),
+        ordinalRank: parseOrdinalRank(row.rawCategory)
+    }));
+    if (!rows.length) return message("No valid data for vertical bars");
+
+    const allTemporal = xColumn.data_type === "temporal" || rows.every(d => Number.isFinite(d.temporalRank));
+    const allOrdinal = !allTemporal && rows.every(d => Number.isFinite(d.ordinalRank));
+    const sortMode = allTemporal ? "chronological" : (allOrdinal ? "ordered category" : "largest primary value");
+    rows.sort((a, b) => {
+        if (allTemporal) return d3.ascending(a.temporalRank, b.temporalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        if (allOrdinal) return d3.ascending(a.ordinalRank, b.ordinalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        return d3.descending(a.y, b.y) || d3.ascending(a.category, b.category);
+    });
+
+    const yLabel = readableLabel(yColumn.label || yField);
+    const y2Label = readableLabel(y2Column.label || y2Field);
+    const xLabel = readableLabel(xColumn.label || xField);
+    const titleLines = wrapLines(`${yLabel} and ${y2Label}`, 16, 5);
+    const byLine = fitText(`by ${xLabel}`, 24);
+    const subtitle = `${fitText(yLabel, 36)} compared with ${fitText(y2Label, 34)} across ${fitText(xLabel, 24).toLowerCase()} categories.`;
+
+    const headerX = 42;
+    const headerTop = 42;
+    const titleSize = Math.max(22, Math.min(25, width * 0.042));
+    const titleLeading = titleSize * 0.93;
+    const byLineY = titleLines.length * titleLeading + 8;
+    const accentY = byLineY + 31;
+    const subtitleY = accentY + 29;
+    const referenceHeader = svg.append("g")
+        .attr("class", "reference-header title-text-block")
+        .attr("transform", `translate(${headerX}, ${headerTop})`);
+
+    titleLines.forEach((line, index) => {
+        referenceHeader.append("text")
+            .attr("class", `reference-title-line reference-title-line-${index + 1}`)
+            .attr("x", 0)
+            .attr("y", index * titleLeading)
+            .attr("fill", navy)
+            .style("font-family", titleFamily)
+            .style("font-size", `${titleSize}px`)
+            .style("font-weight", "900")
+            .style("letter-spacing", "0")
+            .text(line);
+    });
+
+    referenceHeader.append("text")
+        .attr("class", "reference-byline")
+        .attr("x", 0)
+        .attr("y", byLineY)
+        .attr("fill", blue)
+        .style("font-family", titleFamily)
+        .style("font-size", `${Math.max(18, titleSize * 0.60)}px`)
+        .style("font-weight", "900")
+        .style("letter-spacing", "0")
+        .text(byLine);
+
+    referenceHeader.append("line")
+        .attr("class", "title-accent-rule")
+        .attr("x1", 0)
+        .attr("x2", 58)
+        .attr("y1", accentY)
+        .attr("y2", accentY)
+        .attr("stroke", "#0e9f9a")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+
+    wrapLines(subtitle, 42, 2).forEach((line, index) => {
+        referenceHeader.append("text")
+            .attr("class", "reference-subtitle-line")
+            .attr("x", 0)
+            .attr("y", subtitleY + index * 20)
+            .attr("fill", "#374151")
+            .style("font-family", annotationFamily)
+            .style("font-size", "15px")
+            .style("font-weight", "500")
+            .text(line);
+    });
+
+    const decor = svg.append("g")
+        .attr("class", "top-decorative-image-slot swimmer-wave-slot")
+        .attr("transform", `translate(${width * 0.48}, 34)`);
+    const decorW = width * 0.46;
+    decor.append("path")
+        .attr("class", "decorative-wave-ribbon")
+        .attr("d", `M0 110 C${decorW * 0.25} 88,${decorW * 0.36} 132,${decorW * 0.60} 92 C${decorW * 0.75} 68,${decorW * 0.90} 86,${decorW} 62 L${decorW} 118 C${decorW * 0.73} 139,${decorW * 0.42} 141,0 126 Z`)
+        .attr("fill", "#bfe6ff")
+        .attr("opacity", 0.86);
+    decor.append("path")
+        .attr("class", "decorative-wave-front")
+        .attr("d", `M${decorW * 0.06} 122 C${decorW * 0.25} 92,${decorW * 0.38} 124,${decorW * 0.55} 98 C${decorW * 0.76} 66,${decorW * 0.82} 94,${decorW * 0.98} 78`)
+        .attr("fill", "none")
+        .attr("stroke", "#178ed8")
+        .attr("stroke-width", 9)
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.72);
+    decor.append("path")
+        .attr("class", "decorative-swimmer-arm")
+        .attr("d", `M${decorW * 0.28} 72 C${decorW * 0.41} 56,${decorW * 0.54} 42,${decorW * 0.64} 48 C${decorW * 0.70} 54,${decorW * 0.72} 68,${decorW * 0.76} 78`)
+        .attr("fill", "none")
+        .attr("stroke", "#f4a072")
+        .attr("stroke-width", 18)
+        .attr("stroke-linecap", "round");
+    decor.append("circle")
+        .attr("class", "decorative-swimmer-head")
+        .attr("cx", decorW * 0.84)
+        .attr("cy", 66)
+        .attr("r", 19)
+        .attr("fill", "#f5b18a");
+    decor.append("path")
+        .attr("class", "decorative-swimmer-cap")
+        .attr("d", `M${decorW * 0.80} 56 Q${decorW * 0.84} 37 ${decorW * 0.90} 55 L${decorW * 0.89} 73 Q${decorW * 0.84} 62 ${decorW * 0.80} 56 Z`)
+        .attr("fill", "#e91d36");
+    decor.append("circle")
+        .attr("class", "decorative-swimmer-goggle")
+        .attr("cx", decorW * 0.855)
+        .attr("cy", 64)
+        .attr("r", 5)
+        .attr("fill", navy);
+
+    const legendY = Math.max(214, headerTop + subtitleY + 64);
+    const legend = svg.append("g")
+        .attr("class", "legend-card reference-legend")
+        .attr("transform", `translate(${headerX}, ${legendY})`);
+    legend.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", Math.min(width - 84, 308))
+        .attr("height", 46)
+        .attr("rx", 10)
+        .attr("fill", "rgba(255,255,255,0.92)")
+        .attr("stroke", "rgba(148,163,184,0.36)");
+
+    const legendItems = [
+        { label: yLabel, color: red, shape: "rect", className: "legend-primary" },
+        { label: y2Label, color: navy, shape: "circle", className: "legend-secondary" }
+    ];
+    legendItems.forEach((item, index) => {
+        const itemX = index ? Math.min(176, width * 0.30) : 24;
+        const itemG = legend.append("g")
+            .attr("class", `legend-item ${item.className}`)
+            .attr("transform", `translate(${itemX}, 23)`);
+        if (item.shape === "rect") {
+            itemG.append("rect")
+                .attr("x", -8)
+                .attr("y", -8)
+                .attr("width", 16)
+                .attr("height", 16)
+                .attr("rx", 1.5)
+                .attr("fill", item.color);
+        } else {
+            itemG.append("circle")
+                .attr("cx", 0)
+                .attr("cy", 0)
+                .attr("r", 8)
+                .attr("fill", item.color);
+        }
+        itemG.append("text")
+            .attr("x", 18)
+            .attr("y", 0)
+            .attr("dominant-baseline", "middle")
+            .attr("fill", darkText)
+            .style("font-family", annotationFamily)
+            .style("font-size", "13px")
+            .style("font-weight", "700")
+            .text(fitText(item.label + (index === 0 && yUnit ? ` (${yUnit})` : index === 1 && y2Unit ? ` (${y2Unit})` : ""), 19));
+    });
+
+    const chartX = Math.max(58, width * 0.10);
+    const chartY = legendY + 84;
+    const chartW = width - chartX * 2;
+    const footerH = 72;
+    const footerY = height - footerH - 45;
+    const chartH = Math.max(300, footerY - chartY - 34);
+    const plotTop = chartY + 142;
+    const plotBottom = chartY + chartH - 74;
+    const circleY = chartY + chartH - 34;
+    const xScale = d3.scaleBand()
+        .domain(rows.map(d => d.category))
+        .range([0, chartW])
+        .padding(rows.length > 8 ? 0.13 : 0.17);
+
+    const minY = d3.min(rows, d => d.y) || 0;
+    const maxY = d3.max(rows, d => d.y) || 0;
+    const span = Math.max(1, maxY - minY);
+    const yDomain = [
+        Math.min(0, minY - span * 0.12),
+        Math.max(0, maxY + span * 0.12)
+    ];
+    const yScale = d3.scaleLinear()
+        .domain(yDomain)
+        .nice(5)
+        .range([plotBottom, plotTop]);
+    const zeroY = yScale(0);
+    const maxY2 = d3.max(rows, d => d.y2) || 1;
+    const circleScale = d3.scaleSqrt()
+        .domain([0, maxY2])
+        .range([Math.max(5, Math.min(8, xScale.bandwidth() * 0.18)), Math.max(13, Math.min(22, xScale.bandwidth() * 0.32))]);
+    const colorFor = (row, index) => sourceColors.field?.[row.rawCategory]
+        || sourceColors.field?.[row.category]
+        || palette[index % palette.length]
+        || red;
+    const softFillFor = (color, index) => {
+        const fallback = ["#f8e9ed", "#e7f6f6", "#eaf8ef", "#edf7e9", "#f0ecfa", "#fff4cf", "#e8f1ff", "#fff0df"];
+        return d3.color(color)?.copy({ opacity: 0.10 })?.formatRgb() || fallback[index % fallback.length];
+    };
+
+    const chart = svg.append("g")
+        .attr("class", "reference-chart-block vertical-bar-plot")
+        .attr("transform", `translate(${chartX}, 0)`);
+
+    chart.append("rect")
+        .attr("class", "plot-background reference-plot-panel")
+        .attr("x", -10)
+        .attr("y", chartY - 8)
+        .attr("width", chartW + 20)
+        .attr("height", chartH + 24)
+        .attr("rx", 10)
+        .attr("fill", "rgba(255,255,255,0.68)")
+        .attr("stroke", "rgba(210,225,238,0.62)");
+
+    let yTicks = yScale.ticks(5);
+    if (!yTicks.some(tick => Math.abs(tick) < 1e-9)) yTicks.push(0);
+    yTicks = Array.from(new Set(yTicks.map(tick => Number(tick.toPrecision(12))))).sort((a, b) => a - b);
+
+    yTicks.forEach(tick => {
+        const y = yScale(tick);
+        chart.append("line")
+            .attr("class", "gridline y-axis-gridline")
+            .attr("x1", 0)
+            .attr("x2", chartW)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", Math.abs(tick) < 1e-9 ? "rgba(148,163,184,0.58)" : "rgba(148,163,184,0.26)")
+            .attr("stroke-width", Math.abs(tick) < 1e-9 ? 1.2 : 0.8)
+            .attr("stroke-dasharray", Math.abs(tick) < 1e-9 ? "4 3" : "none");
+        chart.append("text")
+            .attr("class", "y-axis-tick primary-axis-tick")
+            .attr("x", -12)
+            .attr("y", y)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#3f4755")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(8, valueSize - 0.5)}px`)
+            .style("font-weight", "650")
+            .text(formatLocalValue(tick, yUnit));
+    });
+
+    const y2Scale = d3.scaleLinear().domain([0, maxY2]).nice(4).range([plotBottom, plotTop]);
+    y2Scale.ticks(4).forEach(tick => {
+        chart.append("text")
+            .attr("class", "secondary-axis-tick")
+            .attr("x", chartW + 12)
+            .attr("y", y2Scale(tick))
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#075ca5")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(8, valueSize - 0.5)}px`)
+            .style("font-weight", "650")
+            .text(formatLocalValue(tick, y2Unit));
+    });
+
+    chart.append("text")
+        .attr("class", "axis-title y-axis-title")
+        .attr("x", -(plotTop + plotBottom) / 2)
+        .attr("y", -76)
+        .attr("transform", "rotate(-90)")
+        .attr("text-anchor", "middle")
+        .attr("fill", red)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(10, valueSize)}px`)
+        .style("font-weight", "800")
+        .text(fitText(yLabel + (yUnit ? ` (${yUnit})` : ""), 34));
+
+    chart.append("text")
+        .attr("class", "axis-title secondary-axis-title")
+        .attr("x", (plotTop + plotBottom) / 2)
+        .attr("y", -(chartW + 64))
+        .attr("transform", "rotate(90)")
+        .attr("text-anchor", "middle")
+        .attr("fill", "#075ca5")
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(10, valueSize)}px`)
+        .style("font-weight", "800")
+        .text(fitText(y2Label + (y2Unit ? ` (${y2Unit})` : ""), 34));
+
+    rows.forEach((row, index) => {
+        const x = xScale(row.category);
+        const bandWidth = xScale.bandwidth();
+        const centerX = x + bandWidth / 2;
+        const color = colorFor(row, index);
+        const panelWidth = Math.max(32, bandWidth * 0.94);
+        const panelX = centerX - panelWidth / 2;
+        const panelY = chartY + 12;
+        const panelH = chartH - 2;
+        const iconR = Math.max(14, Math.min(24, bandWidth * 0.27));
+        const barWidth = Math.max(13, Math.min(40, bandWidth * 0.46));
+        const yValue = row.y;
+        const yTop = yScale(Math.max(0, yValue));
+        const yBottom = yScale(Math.min(0, yValue));
+        const barHeight = Math.max(1, Math.abs(yBottom - yTop));
+        const barY = yValue >= 0 ? yTop : zeroY;
+        const labelY = yValue >= 0 ? Math.max(plotTop - 8, barY - 13) : Math.min(plotBottom + 17, barY + barHeight + 13);
+        const radius = circleScale(row.y2);
+
+        chart.append("rect")
+            .attr("class", "category-column-panel reference-column-card")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("data-y", row.y)
+            .attr("data-y2", row.y2)
+            .attr("x", panelX)
+            .attr("y", panelY)
+            .attr("width", panelWidth)
+            .attr("height", panelH)
+            .attr("rx", 13)
+            .attr("fill", softFillFor(color, index))
+            .attr("stroke", "rgba(255,255,255,0.88)")
+            .attr("filter", rows.length <= 7 ? "url(#vb12-card-shadow)" : null);
+
+        const icon = chart.append("g")
+            .attr("class", "category-icon-slot")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("transform", `translate(${centerX}, ${chartY + 50})`);
+        icon.append("circle")
+            .attr("r", iconR)
+            .attr("fill", "rgba(255,255,255,0.86)")
+            .attr("stroke", "rgba(226,232,240,0.72)");
+        icon.append("path")
+            .attr("d", index % 3 === 0
+                ? `M${-iconR * 0.55},${iconR * 0.16} C${-iconR * 0.18},${-iconR * 0.36} ${iconR * 0.18},${iconR * 0.48} ${iconR * 0.55},${-iconR * 0.14}`
+                : index % 3 === 1
+                    ? `M${-iconR * 0.52},${iconR * 0.24} L${-iconR * 0.10},${-iconR * 0.38} L${iconR * 0.50},${iconR * 0.16}`
+                    : `M${-iconR * 0.48},0 L${iconR * 0.48},0 M0,${-iconR * 0.48} L0,${iconR * 0.48}`)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", Math.max(2.2, iconR * 0.18))
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
+
+        const categoryText = chart.append("text")
+            .attr("class", "x-axis-tick category-label")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("x", centerX)
+            .attr("y", chartY + 94)
+            .attr("text-anchor", "middle")
+            .attr("fill", navy)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(8, Math.min(labelSize + 0.5, bandWidth * 0.17))}px`)
+            .style("font-weight", "900");
+        const categoryChars = Math.max(5, Math.floor(panelWidth / (labelSize * 0.48)));
+        wrapLines(row.category.toUpperCase(), categoryChars, 2).forEach((line, lineIndex) => {
+            categoryText.append("tspan")
+                .attr("x", centerX)
+                .attr("dy", lineIndex === 0 ? 0 : labelSize + 1)
+                .text(line);
+        });
+
+        chart.append("rect")
+            .attr("class", "bar-track")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("x", centerX - barWidth / 2)
+            .attr("y", plotTop)
+            .attr("width", barWidth)
+            .attr("height", plotBottom - plotTop)
+            .attr("rx", Math.min(12, barWidth / 2))
+            .attr("fill", "rgba(255,255,255,0.62)");
+
+        chart.append("rect")
+            .attr("class", "vertical-bar bar-mark data-point mark")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("data-y", row.y)
+            .attr("data-y2", row.y2)
+            .attr("x", centerX - barWidth / 2)
+            .attr("y", barY)
+            .attr("width", barWidth)
+            .attr("height", barHeight)
+            .attr("rx", variables.has_rounded_corners === false ? 4 : Math.min(12, barWidth / 2))
+            .attr("fill", color);
+
+        chart.append("rect")
+            .attr("class", "bar-highlight")
+            .attr("x", centerX - barWidth / 2)
+            .attr("y", barY)
+            .attr("width", barWidth)
+            .attr("height", barHeight)
+            .attr("rx", variables.has_rounded_corners === false ? 4 : Math.min(12, barWidth / 2))
+            .attr("fill", "url(#vb12-bar-highlight)")
+            .attr("opacity", 0.45);
+
+        chart.append("text")
+            .attr("class", "bar-value-label value-label")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("data-y", row.y)
+            .attr("x", centerX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("fill", color)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(11, valueSize + 2)}px`)
+            .style("font-weight", "900")
+            .text(formatLocalValue(row.y, yUnit));
+
+        chart.append("line")
+            .attr("class", "secondary-marker-guide")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("x1", centerX)
+            .attr("x2", centerX)
+            .attr("y1", zeroY)
+            .attr("y2", circleY)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.2)
+            .attr("stroke-dasharray", "3 3")
+            .attr("opacity", 0.62);
+
+        chart.append("circle")
+            .attr("class", "secondary-circle circle-mark")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("data-y2", row.y2)
+            .attr("cx", centerX)
+            .attr("cy", circleY)
+            .attr("r", radius)
+            .attr("fill", color)
+            .attr("stroke", "rgba(255,255,255,0.95)")
+            .attr("stroke-width", 2.2);
+
+        chart.append("text")
+            .attr("class", "secondary-value-label")
+            .attr("data-source-index", row.firstIndex)
+            .attr("data-category", row.category)
+            .attr("data-y2", row.y2)
+            .attr("x", centerX)
+            .attr("y", circleY + Math.max(3, valueSize * 0.36))
+            .attr("text-anchor", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(7.5, Math.min(valueSize, radius * 0.72))}px`)
+            .style("font-weight", "900")
+            .text(formatLocalValue(row.y2, ""));
+
+        if (y2Unit) {
+            chart.append("text")
+                .attr("class", "secondary-unit-label")
+                .attr("data-source-index", row.firstIndex)
+                .attr("data-category", row.category)
+                .attr("x", centerX)
+                .attr("y", circleY + radius + 17)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#334155")
+                .style("font-family", annotationFamily)
+                .style("font-size", `${Math.max(7.5, valueSize - 1)}px`)
+                .text(fitText(y2Unit, 8));
+        }
+    });
+
+    const footer = svg.append("g")
+        .attr("class", "bottom-insight-card footer-source-card")
+        .attr("transform", `translate(${Math.max(34, width * 0.07)}, ${footerY})`);
+    const footerW = width - Math.max(34, width * 0.07) * 2;
+    footer.append("rect")
+        .attr("class", "footer-card-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", footerW)
+        .attr("height", footerH)
+        .attr("rx", 11)
+        .attr("fill", "rgba(255,255,255,0.86)")
+        .attr("stroke", "#bed7ee")
+        .attr("stroke-width", 1);
+
+    const footerIcon = footer.append("g")
+        .attr("class", "footer-icon-slot")
+        .attr("transform", "translate(58, 36)");
+    footerIcon.append("path")
+        .attr("d", "M-24 18 L-24 3 L-15 3 L-15 18 M-9 18 L-9 -8 L0 -8 L0 18 M6 18 L6 -22 L18 -22 L18 18")
+        .attr("fill", "none")
+        .attr("stroke", blue)
+        .attr("stroke-width", 5)
+        .attr("stroke-linejoin", "round");
+    footerIcon.append("path")
+        .attr("d", "M-26 -4 L-9 -16 L0 -8 L21 -31")
+        .attr("fill", "none")
+        .attr("stroke", "#0f8fd0")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    footerIcon.append("path")
+        .attr("d", "M21 -31 L20 -15 M21 -31 L6 -28")
+        .attr("fill", "none")
+        .attr("stroke", "#0f8fd0")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round");
+
+    footer.append("line")
+        .attr("class", "footer-divider")
+        .attr("x1", 102)
+        .attr("x2", 102)
+        .attr("y1", 14)
+        .attr("y2", footerH - 14)
+        .attr("stroke", "#bfd3e8")
+        .attr("stroke-width", 1.4);
+
+    const highY = rows.reduce((best, row) => row.y > best.y ? row : best, rows[0]);
+    const highY2 = rows.reduce((best, row) => row.y2 > best.y2 ? row : best, rows[0]);
+    const insightText = `${fitText(highY.category, 20)} leads ${fitText(yLabel, 24)}; ${fitText(highY2.category, 20)} leads ${fitText(y2Label, 24)}.`;
+    const insightLines = wrapLines(insightText, Math.max(34, Math.floor((footerW - 190) / 7)), 2);
+    insightLines.forEach((line, index) => {
+        footer.append("text")
+            .attr("class", "footer-insight-title")
+            .attr("x", 122)
+            .attr("y", 25 + index * 15)
+            .attr("fill", navy)
+            .style("font-family", annotationFamily)
+            .style("font-size", "13.5px")
+            .style("font-weight", "900")
+            .text(line);
+    });
+    footer.append("text")
+        .attr("class", "source-row source-text")
+        .attr("x", 122)
+        .attr("y", insightLines.length > 1 ? 58 : 51)
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", "10.5px")
+        .text(fitText(`Source: ${fitText(xLabel, 20)} order is ${sortMode}; ${fitText(y2Label, 22)} uses circle size.`, Math.max(38, Math.floor((footerW - 245) / 5.6))));
+
+    const footerDecor = footer.append("g")
+        .attr("class", "footer-decorative-image-slot wave-icon-slot")
+        .attr("transform", `translate(${footerW - 72}, 39)`);
+    footerDecor.append("path")
+        .attr("d", "M-36 6 C-22 -13,-8 19,8 -1 S28 -12,38 4")
+        .attr("fill", "none")
+        .attr("stroke", "#93c5e8")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round");
+    footerDecor.append("path")
+        .attr("d", "M-32 18 C-16 1,-2 29,16 10 S30 3,40 15")
+        .attr("fill", "none")
+        .attr("stroke", "#57aee2")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    footerDecor.append("circle")
+        .attr("cx", 35)
+        .attr("cy", -17)
+        .attr("r", 10)
+        .attr("fill", "#9bcdf0");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_bar_chart_13.js

@@ -0,0 +1,652 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart",
+    "chart_name": "vertical_bar_chart_13",
+    "is_composite": true,
+    "required_fields": ["x", "y", "y2"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"], ["numerical"]],
+    "required_fields_range": [[2, 18], ["-inf", "inf"], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": ["radius_corner", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const chartData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "14px", font_weight: 500 },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: 400 }
+    };
+    const sourceColors = jsonData.colors || {
+        text_color: "#1E2A3A",
+        other: { primary: "#2468C9", secondary: "#F35F72" }
+    };
+
+    const dimensionColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const valueColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const valueColumn2 = chartUtils.schema.channel(jsonData, "y2", { fallbackIndex: 2 }).raw || {};
+    const dimensionField = dimensionColumn.name;
+    const valueField = valueColumn.name;
+    const valueField2 = valueColumn2.name;
+
+    d3.select(containerSelector).html("");
+
+    const baseWidth = Number(variables.width) || 600;
+    const width = Math.max(860, baseWidth);
+    const height = Math.max(780, Number(variables.height) || 600);
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .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 labelFont = typography.label || {};
+    const annotationFont = typography.annotation || {};
+    const labelFontFamily = labelFont.font_family || "Arial";
+    const annotationFontFamily = annotationFont.font_family || labelFontFamily;
+    const labelFontWeight = labelFont.font_weight || 500;
+    const annotationFontWeight = annotationFont.font_weight || 500;
+    const baseLabelSize = parseFloat(labelFont.font_size) || 14;
+    const baseAnnotationSize = parseFloat(annotationFont.font_size) || 12;
+    const navy = "#061A4C";
+    const muted = "#3C465A";
+    const barColor = "#2468C9";
+    const secondaryColor = "#F35F72";
+    const softRed = "#FFF1F3";
+    const axisColor = "#2D3545";
+    const gridColor = "#DDE3EA";
+
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    const measureLabelText = (text, fontSize, weight = labelFontWeight, family = labelFontFamily) => {
+        context.font = `${weight} ${fontSize}px ${family}`;
+        return chartUtils.text.contextWidth(context, String(text ?? ""));
+    };
+
+    const unitText = (unit) => {
+        const raw = String(unit ?? "").trim();
+        return raw === "none" ? "" : raw;
+    };
+    const yUnit = unitText(valueColumn.unit);
+    const y2Unit = unitText(valueColumn2.unit);
+    const readableFieldName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const formatLocalValue = value => {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const absValue = Math.abs(numeric);
+        if (absValue >= 1000000000) return d3.format("~g")(numeric / 1000000000) + "B";
+        if (absValue >= 1000000) return d3.format("~g")(numeric / 1000000) + "M";
+        if (absValue >= 1000) return d3.format("~g")(numeric / 1000) + "K";
+        return d3.format(",.4~g")(numeric);
+    };
+
+    const formatValueWithUnit = (value, unit, signed = false) => {
+        const numeric = Number(value);
+        const formatted = formatLocalValue(numeric);
+        const sign = signed && numeric > 0 ? "+" : "";
+        if (!unit) return `${sign}${formatted}`;
+        if (unit === "$") return `${sign}$${formatted}`;
+        if (unit === "%") return `${sign}${formatted}%`;
+        return `${sign}${formatted} ${unit}`;
+    };
+
+    const formatCompactValue = (value, unit, signed = false) => {
+        const numeric = Number(value);
+        const formatted = formatLocalValue(numeric);
+        const sign = signed && numeric > 0 ? "+" : "";
+        if (unit === "$") return `${sign}$${formatted}`;
+        if (unit === "%") return `${sign}${formatted}%`;
+        return `${sign}${formatted}`;
+    };
+
+    const legendLabel = (fieldName, unit) => {
+        const label = readableFieldName(fieldName);
+        if (!unit || unit === "%" || unit === "$") return label;
+        return `${label} (${unit})`;
+    };
+
+    const labelTokens = text => String(text ?? "")
+        .replace(/[()[\]{}]/g, " ")
+        .replace(/[,:;/\\|_-]+/g, " ")
+        .split(/\s+/)
+        .map(token => token.trim())
+        .filter(Boolean);
+
+    const temporalKey = value => {
+        if (value instanceof Date) return value.getTime();
+        if (typeof value === "number") return value;
+        const str = String(value ?? "").trim();
+        if (/^-?\d+(\.\d+)?$/.test(str)) return +str;
+        const parsed = Date.parse(str);
+        if (!Number.isNaN(parsed)) return parsed;
+        const yearMatch = str.match(/^-?\d{1,6}/);
+        return yearMatch ? +yearMatch[0] : null;
+    };
+
+    const compactLabelBase = (value, isTemporal) => {
+        const str = String(value ?? "").trim();
+        if (isTemporal) return str;
+        const parentheticalWithSuffix = str.match(/\(([^()]{2,})\)\s*[-–—]\s*(.{2,})$/);
+        if (parentheticalWithSuffix) return `${parentheticalWithSuffix[1].trim()} ${parentheticalWithSuffix[2].trim()}`;
+        const parenthetical = str.match(/\(([^()]{2,})\)\s*$/);
+        if (parenthetical) return parenthetical[1].trim();
+        const tokens = labelTokens(str);
+        if (tokens.length >= 4) return `${tokens[0]} ${tokens[tokens.length - 1]}`;
+        return str;
+    };
+
+    const suffixLabel = (value, tokenCount) => {
+        const tokens = labelTokens(value);
+        if (!tokens.length) return String(value ?? "");
+        return tokens.slice(Math.max(0, tokens.length - tokenCount)).join(" ");
+    };
+
+    const buildDisplayLabels = (values, isTemporal) => {
+        const labels = values.map(value => compactLabelBase(value, isTemporal));
+        const counts = new Map();
+        labels.forEach(label => counts.set(label.toLowerCase(), (counts.get(label.toLowerCase()) || 0) + 1));
+        return labels.map((label, index) => {
+            if ((counts.get(label.toLowerCase()) || 0) === 1) return label;
+            for (let tokenCount = 1; tokenCount <= 4; tokenCount++) {
+                const candidate = suffixLabel(values[index], tokenCount);
+                const duplicate = values.some((other, otherIndex) =>
+                    otherIndex !== index && suffixLabel(other, tokenCount).toLowerCase() === candidate.toLowerCase()
+                );
+                if (!duplicate) return candidate;
+            }
+            return String(values[index]);
+        });
+    };
+
+    const splitLabelLines = (text, maxWidth, fontSize, maxLines = 2, weight = labelFontWeight) => {
+        const words = labelTokens(text);
+        const raw = String(text ?? "");
+        if (words.length <= 1) return [raw];
+        const lines = [];
+        let current = "";
+        for (const word of words) {
+            const next = current ? `${current} ${word}` : word;
+            if (measureLabelText(next, fontSize, weight, labelFontFamily) <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+            if (lines.length === maxLines - 1) break;
+        }
+        if (current && lines.length < maxLines) lines.push(current);
+        return lines.slice(0, maxLines);
+    };
+
+    const normalizedData = chartData
+        .map((d, index) => ({
+            ...d,
+            __index: index,
+            __dimension: d[dimensionField],
+            __y: +d[valueField],
+            __y2: Math.max(0, +d[valueField2] || 0),
+            __temporalKey: temporalKey(d[dimensionField])
+        }))
+        .filter(d => d.__dimension !== undefined && Number.isFinite(d.__y) && Number.isFinite(d.__y2));
+
+    const validTemporalKeys = normalizedData.filter(d => d.__temporalKey !== null).length;
+    const isTemporal = dimensionColumn.data_type === "temporal" || (
+        normalizedData.length > 0 && validTemporalKeys === normalizedData.length
+    );
+    const sortedData = [...normalizedData].sort((a, b) => {
+        if (isTemporal) return d3.ascending(a.__temporalKey, b.__temporalKey) || d3.ascending(a.__index, b.__index);
+        return d3.descending(a.__y, b.__y) || d3.ascending(a.__index, b.__index);
+    });
+
+    if (!sortedData.length) return svg.node();
+
+    const displayLabels = buildDisplayLabels(sortedData.map(d => d.__dimension), isTemporal);
+    sortedData.forEach((d, index) => {
+        d.__displayDimension = displayLabels[index] || d.__dimension;
+    });
+
+    const count = sortedData.length;
+    const denseCategories = count > 12;
+    const crowdedCategories = count > 9;
+    const longYAxisUnit = Boolean(yUnit && yUnit !== "%" && yUnit !== "$" && yUnit.length > 3);
+    const margin = { top: 66, right: 36, bottom: 226, left: longYAxisUnit ? 108 : 72 };
+    const innerWidth = width - margin.left - margin.right;
+    const plotTop = margin.top + 54;
+    const plotBottom = height - margin.bottom;
+    const plotHeight = plotBottom - plotTop;
+    const labelY = plotBottom + 32;
+    const secondaryY = plotBottom + 86;
+    const takeawayY = height - 118;
+    const sourceY = height - 20;
+
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map((d, i) => `${i}-${d.__dimension}`))
+        .range([margin.left, margin.left + innerWidth])
+        .padding(count > 12 ? 0.18 : count > 8 ? 0.22 : 0.28);
+
+    const minY = Math.min(0, d3.min(sortedData, d => d.__y) || 0);
+    const maxY = Math.max(0, d3.max(sortedData, d => d.__y) || 0);
+    const yExtent = maxY - minY || 1;
+    const yScale = d3.scaleLinear()
+        .domain([minY - yExtent * 0.06, maxY + yExtent * 0.08])
+        .range([plotBottom, plotTop])
+        .nice(5);
+    const zeroY = yScale(0);
+
+    const maxY2 = d3.max(sortedData, d => d.__y2) || 1;
+    const badgeW = denseCategories
+        ? Math.max(38, Math.min(76, xScale.bandwidth()))
+        : Math.max(42, Math.min(92, xScale.bandwidth() * 1.20));
+    const badgeH = denseCategories ? 44 : 46;
+    const maxMarkerSide = Math.max(8, Math.min(19, badgeH * 0.35, badgeW * 0.28));
+    const markerSideScale = d3.scaleSqrt()
+        .domain([0, maxY2])
+        .range([5, maxMarkerSide]);
+
+    const defs = svg.append("defs");
+    const barGradient = defs.append("linearGradient")
+        .attr("id", "vertical13BarGradient")
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "100%")
+        .attr("y2", "0%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", "#67C4F4");
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", "#1561C9");
+    const barShadow = defs.append("filter")
+        .attr("id", "vertical13BarShadow")
+        .attr("x", "-20%")
+        .attr("y", "-18%")
+        .attr("width", "140%")
+        .attr("height", "140%");
+    barShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 3)
+        .attr("flood-color", "#1A5FA9")
+        .attr("flood-opacity", 0.18);
+    const iconGradient = defs.append("linearGradient")
+        .attr("id", "vertical13IconGradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "100%")
+        .attr("y2", "0%");
+    iconGradient.append("stop").attr("offset", "0%").attr("stop-color", "#0C57BB");
+    iconGradient.append("stop").attr("offset", "100%").attr("stop-color", "#4FA7F4");
+
+    svg.append("rect")
+        .attr("class", "chart-canvas reference-chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "transparent");
+
+    const legend = svg.append("g").attr("class", "reference-legend");
+    const legendItems = [
+        { label: legendLabel(valueField, yUnit), color: barColor, className: "reference-primary-legend-dot" },
+        { label: legendLabel(valueField2, y2Unit), color: secondaryColor, className: "reference-secondary-legend-dot" }
+    ];
+    const legendFont = Math.max(11, Math.min(13, baseAnnotationSize));
+    const legendWidths = legendItems.map(item => 20 + measureLabelText(item.label, legendFont, 500, annotationFontFamily));
+    const legendGap = denseCategories ? 42 : 52;
+    const totalLegendWidth = legendWidths.reduce((a, b) => a + b, 0) + legendGap;
+    let legendX = margin.left + (innerWidth - totalLegendWidth) / 2;
+    legendItems.forEach((item, index) => {
+        const x = legendX + legendWidths.slice(0, index).reduce((a, b) => a + b, 0) + legendGap * index;
+        const group = legend.append("g")
+            .attr("class", "reference-legend-item")
+            .attr("transform", `translate(${x}, ${margin.top})`);
+        group.append("circle")
+            .attr("class", item.className)
+            .attr("cx", 0)
+            .attr("cy", 0)
+            .attr("r", 8)
+            .attr("fill", item.color);
+        group.append("text")
+            .attr("x", 18)
+            .attr("y", 1)
+            .attr("dominant-baseline", "middle")
+            .style("font-family", annotationFontFamily)
+            .style("font-size", `${legendFont}px`)
+            .style("font-weight", 500)
+            .style("fill", muted)
+            .text(item.label);
+    });
+
+    const chartG = svg.append("g").attr("class", "reference-chart-body");
+    chartG.append("line")
+        .attr("class", "reference-y-axis")
+        .attr("x1", margin.left)
+        .attr("x2", margin.left)
+        .attr("y1", plotTop)
+        .attr("y2", plotBottom)
+        .attr("stroke", "#AEB8C4")
+        .attr("stroke-width", 1.2);
+    chartG.append("line")
+        .attr("class", "reference-x-axis")
+        .attr("x1", margin.left)
+        .attr("x2", margin.left + innerWidth)
+        .attr("y1", zeroY)
+        .attr("y2", zeroY)
+        .attr("stroke", "#7B8592")
+        .attr("stroke-width", 1.3);
+
+    const tickValues = yScale.ticks(5);
+    tickValues.forEach(tick => {
+        const y = yScale(tick);
+        chartG.append("line")
+            .attr("class", "reference-grid-line")
+            .attr("x1", margin.left)
+            .attr("x2", margin.left + innerWidth)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", gridColor)
+            .attr("stroke-width", tick === 0 ? 0 : 1)
+            .attr("stroke-dasharray", "4 5")
+            .attr("opacity", tick === 0 ? 0 : 0.78);
+        chartG.append("text")
+            .attr("class", "axis-tick")
+            .attr("x", margin.left - 12)
+            .attr("y", y)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", annotationFontFamily)
+            .style("font-size", `${longYAxisUnit ? Math.max(10, Math.min(12, baseAnnotationSize)) : Math.max(11, baseAnnotationSize)}px`)
+            .style("font-weight", 500)
+            .style("fill", muted)
+            .text(formatValueWithUnit(tick, yUnit));
+    });
+
+    chartG.append("text")
+        .attr("class", "reference-y-axis-title")
+        .attr("x", -(plotTop + plotHeight / 2))
+        .attr("y", longYAxisUnit ? 18 : 24)
+        .attr("transform", "rotate(-90)")
+        .attr("text-anchor", "middle")
+        .style("font-family", labelFontFamily)
+        .style("font-size", `${longYAxisUnit ? Math.max(12, baseLabelSize - 1) : Math.max(14, baseLabelSize)}px`)
+        .style("font-weight", 500)
+        .style("fill", muted)
+        .text(readableFieldName(valueField));
+
+    const labelMaxWidth = Math.max(28, xScale.bandwidth() * (denseCategories ? 0.86 : crowdedCategories ? 1.05 : 1.35));
+    const xLabelFont = denseCategories
+        ? Math.max(6.3, Math.min(8.4, xScale.bandwidth() / 5.8))
+        : crowdedCategories
+            ? Math.max(7.6, Math.min(11, xScale.bandwidth() / 5))
+            : Math.max(7.5, Math.min(14, xScale.bandwidth() / 3.8));
+    const valueFont = denseCategories
+        ? Math.max(8, Math.min(13, xScale.bandwidth() / 3.3))
+        : Math.max(8, Math.min(20, xScale.bandwidth() / 2.6));
+    const badgeFont = denseCategories
+        ? Math.max(6.2, Math.min(10, badgeW / 5.6))
+        : Math.max(7, Math.min(14, badgeW / 4.6));
+    const barWidth = Math.max(9, Math.min(78, xScale.bandwidth() * 0.72));
+    const compactPrimaryLabels = denseCategories || longYAxisUnit;
+    const compactSecondaryLabels = denseCategories || Boolean(y2Unit && y2Unit !== "%" && y2Unit !== "$");
+
+    sortedData.forEach((d, index) => {
+        const key = `${index}-${d.__dimension}`;
+        const centerX = xScale(key) + xScale.bandwidth() / 2;
+        const yValue = d.__y;
+        const yBar = yScale(yValue);
+        const barY = Math.min(yBar, zeroY);
+        const barH = Math.max(0, Math.abs(zeroY - yBar));
+        const row = chartG.append("g")
+            .attr("class", "reference-data-item")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("data-y", d.__y)
+            .attr("data-y2", d.__y2);
+
+        row.append("rect")
+            .attr("class", "bar mark reference-primary-bar")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("data-value", d.__y)
+            .attr("x", centerX - barWidth / 2)
+            .attr("y", barY)
+            .attr("width", barWidth)
+            .attr("height", barH)
+            .attr("rx", variables.radius_corner === false ? 0 : Math.min(13, barWidth / 2))
+            .attr("ry", variables.radius_corner === false ? 0 : Math.min(13, barWidth / 2))
+            .attr("fill", yValue >= 0 ? "url(#vertical13BarGradient)" : secondaryColor)
+            .style("filter", "url(#vertical13BarShadow)");
+
+        const barLabel = compactPrimaryLabels
+            ? formatCompactValue(yValue, yUnit, true)
+            : formatValueWithUnit(yValue, yUnit, true);
+        const labelInside = barH > valueFont * 2.2
+            && measureLabelText(barLabel, valueFont, 800, annotationFontFamily) <= Math.max(barWidth * 1.35, xScale.bandwidth() * 0.78);
+        row.append("text")
+            .attr("class", "bar-value value reference-primary-value")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("data-role", "primary")
+            .attr("data-value", d.__y)
+            .attr("x", centerX)
+            .attr("y", labelInside ? (yValue >= 0 ? barY + valueFont * 1.22 : barY + barH - valueFont * 0.45) : (yValue >= 0 ? barY - 6 : barY + barH + valueFont + 4))
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFontFamily)
+            .style("font-size", `${valueFont}px`)
+            .style("font-weight", 800)
+            .style("fill", labelInside ? "#FFFFFF" : navy)
+            .text(barLabel);
+
+        const labelText = row.append("text")
+            .attr("class", "label reference-category-label")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("x", centerX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .style("font-family", labelFontFamily)
+            .style("font-size", `${xLabelFont}px`)
+            .style("font-weight", 600)
+            .style("fill", navy);
+        splitLabelLines(d.__displayDimension, labelMaxWidth, xLabelFont, 2, 600).forEach((line, lineIndex) => {
+            labelText.append("tspan")
+                .attr("x", centerX)
+                .attr("dy", lineIndex === 0 ? 0 : `${xLabelFont * 1.12}px`)
+                .text(line);
+        });
+
+        const markerSide = markerSideScale(d.__y2);
+        const badgeX = centerX - badgeW / 2;
+        const badgeY = secondaryY - badgeH / 2;
+        row.append("rect")
+            .attr("class", "secondary-badge reference-secondary-badge")
+            .attr("x", badgeX)
+            .attr("y", badgeY)
+            .attr("width", badgeW)
+            .attr("height", badgeH)
+            .attr("rx", 9)
+            .attr("ry", 9)
+            .attr("fill", secondaryColor)
+            .attr("fill-opacity", 0.95);
+
+        const iconRadius = denseCategories ? 6 : 7;
+        const iconCx = badgeX + Math.max(denseCategories ? 10 : 12, badgeW * (denseCategories ? 0.27 : 0.25));
+        const iconCy = secondaryY;
+        row.append("path")
+            .attr("class", "reference-secondary-icon")
+            .attr("d", `M${iconCx - iconRadius},${iconCy + 4} A${iconRadius + 1},${iconRadius + 1} 0 0 1 ${iconCx + iconRadius},${iconCy + 4}`)
+            .attr("fill", "none")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2)
+            .attr("stroke-linecap", "round");
+        row.append("line")
+            .attr("class", "reference-secondary-icon")
+            .attr("x1", iconCx)
+            .attr("x2", iconCx + (denseCategories ? 4 : 5))
+            .attr("y1", iconCy + 3)
+            .attr("y2", iconCy - 4)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 2)
+            .attr("stroke-linecap", "round");
+        row.append("rect")
+            .attr("class", "secondary-mark")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("data-value", d.__y2)
+            .attr("data-side", markerSide)
+            .attr("x", iconCx - markerSide / 2)
+            .attr("y", iconCy + 8 - markerSide / 2)
+            .attr("width", markerSide)
+            .attr("height", markerSide)
+            .attr("rx", 2)
+            .attr("ry", 2)
+            .attr("fill", softRed)
+            .attr("fill-opacity", 0.74);
+
+        row.append("text")
+            .attr("class", "secondary-value value reference-secondary-value")
+            .attr("data-source-index", d.__index)
+            .attr("data-category", d.__dimension)
+            .attr("data-role", "secondary")
+            .attr("data-value", d.__y2)
+            .attr("x", badgeX + badgeW * (denseCategories ? 0.67 : 0.62))
+            .attr("y", secondaryY + 1)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .style("font-family", annotationFontFamily)
+            .style("font-size", `${badgeFont}px`)
+            .style("font-weight", 800)
+            .style("fill", "#FFFFFF")
+            .text(compactSecondaryLabels
+                ? formatCompactValue(d.__y2, y2Unit)
+                : formatValueWithUnit(d.__y2, y2Unit));
+    });
+
+    const takeaway = svg.append("g")
+        .attr("class", "reference-takeaway-card")
+        .attr("transform", `translate(42, ${takeawayY})`);
+    const takeawayW = width - 84;
+    const takeawayH = 88;
+    takeaway.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", takeawayW)
+        .attr("height", takeawayH)
+        .attr("rx", 13)
+        .attr("ry", 13)
+        .attr("fill", "#F4FAFF")
+        .attr("stroke", "#C9DEEF")
+        .attr("stroke-width", 1.1);
+
+    const icon = takeaway.append("g")
+        .attr("class", "reference-footer-icon-slot")
+        .attr("transform", "translate(76, 44)");
+    icon.append("circle")
+        .attr("r", 37)
+        .attr("fill", "url(#vertical13IconGradient)")
+        .attr("stroke", "#0A57B7")
+        .attr("stroke-width", 1.1);
+    icon.append("path")
+        .attr("d", "M-22,14 L-8,0 L5,10 L24,-13")
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    icon.append("path")
+        .attr("d", "M12,-14 L25,-14 L25,-1")
+        .attr("fill", "none")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 5)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    const takeawayTitle = "KEY TAKEAWAY";
+    let insight = jsonData.metadata?.main_insight
+        || jsonData.titles?.sub_title
+        || `${readableFieldName(valueField)} and ${readableFieldName(valueField2)} are shown together.`;
+    const insightMax = takeawayW - 170;
+    const insightFont = 15;
+    if (measureLabelText(insight, insightFont, 500, annotationFontFamily) > insightMax * 1.8) {
+        insight = `${readableFieldName(valueField)} bars and ${readableFieldName(valueField2)} badges use source data.`;
+    }
+    const insightLines = splitLabelLines(insight, insightMax, insightFont, 2, 500);
+    takeaway.append("text")
+        .attr("class", "reference-takeaway-title")
+        .attr("x", 150)
+        .attr("y", 31)
+        .style("font-family", labelFontFamily)
+        .style("font-size", "18px")
+        .style("font-weight", 800)
+        .style("fill", "#0A4EA4")
+        .text(takeawayTitle);
+    const insightText = takeaway.append("text")
+        .attr("class", "reference-takeaway-text")
+        .attr("x", 150)
+        .attr("y", 56)
+        .style("font-family", annotationFontFamily)
+        .style("font-size", `${insightFont}px`)
+        .style("font-weight", 500)
+        .style("fill", navy);
+    insightLines.forEach((line, lineIndex) => {
+        insightText.append("tspan")
+            .attr("x", 150)
+            .attr("dy", lineIndex === 0 ? 0 : `${insightFont * 1.25}px`)
+            .text(line);
+    });
+
+    svg.append("text")
+        .attr("class", "reference-source-note")
+        .attr("x", width / 2)
+        .attr("y", sourceY)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFontFamily)
+        .style("font-size", "11px")
+        .style("font-style", "italic")
+        .style("font-weight", 400)
+        .style("fill", "#68717E")
+        .text(`Source: ${readableFieldName(valueField)} and ${readableFieldName(valueField2)} source data`);
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_group_bar_chart_11.js

@@ -0,0 +1,597 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_chart_11",
+    "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": [],
+    "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");
+    }
+
+    // *** BEGIN ADDITION: Define vertical gradients for groups ***
+    const leftGroupColor = colorResolver.field(leftBarGroup, 0, { fallback: "#4269d0" }).value; // Default left color
+    const rightGroupColor = colorResolver.field(rightBarGroup, 0, { fallback: "#ff725c" }).value; // Default right color
+
+    // Gradient for the left group
+    const gradientLeft = defs.append("linearGradient")
+        .attr("id", "gradient-left")
+        .attr("x1", "0%")
+        .attr("y1", "0%") // Top
+        .attr("x2", "0%")
+        .attr("y2", "100%"); // Bottom
+
+    gradientLeft.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", colorResolver.variant(leftGroupColor, { mode: "darker", amount: 0.3 }));
+
+    gradientLeft.append("stop")
+        .attr("offset", "50%")
+        .attr("stop-color", colorResolver.variant(leftGroupColor, { mode: "brighter", amount: 2.5 }));
+
+    gradientLeft.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", colorResolver.variant(leftGroupColor, { mode: "darker", amount: 0.3 }));
+
+    // Gradient for the right group
+    const gradientRight = defs.append("linearGradient")
+        .attr("id", "gradient-right")
+        .attr("x1", "0%")
+        .attr("y1", "0%") // Top
+        .attr("x2", "0%")
+        .attr("y2", "100%"); // Bottom
+
+    gradientRight.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", colorResolver.variant(rightGroupColor, { mode: "darker", amount: 0.3 }));
+
+    gradientRight.append("stop")
+        .attr("offset", "50%")
+        .attr("stop-color", colorResolver.variant(rightGroupColor, { mode: "brighter", amount: 2.5 }));
+
+    gradientRight.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", colorResolver.variant(rightGroupColor, { mode: "darker", amount: 0.3 }));
+    // *** END ADDITION ***
+
+    // ---------- 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.scaledText(+d[yField], { unit: yUnit }), {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).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: typography.label.font_weight
+        }).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;
+
+        if (leftBarData) {
+            leftValue = leftBarData[yField];
+            leftBarHeight = innerHeight - yScale(leftValue);
+            leftBarY = yScale(leftValue);
+
+            // 绘制左侧柱子
+            chart.append("rect")
+                .attr("class", "bar left-bar")
+                .attr("x", leftBarX)
+                .attr("y", leftBarY)
+                .attr("width", barWidth)
+                .attr("height", leftBarHeight)
+                .attr("fill", "url(#gradient-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.scaledText(leftValue, { unit: 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);
+
+            // 绘制右侧柱子
+            chart.append("rect")
+                .attr("class", "bar right-bar")
+                .attr("x", rightBarX)
+                .attr("y", rightBarY)
+                .attr("width", barWidth)
+                .attr("height", rightBarHeight)
+                .attr("fill", "url(#gradient-right)")
+                .attr("rx", variables.has_rounded_corners ? 4 : 0)
+                .attr("ry", variables.has_rounded_corners ? 4 : 0)
+                .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.scaledText(rightValue, { unit: 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);
+        }
+    });
+
+    // *** BEGIN ADDITION: Draw icons below X-axis labels ***
+    const iconSize = 30; // Define icon size
+    const iconY = innerHeight + 45; // Y position below labels (innerHeight + label space + padding + half icon size)
+
+    xValues.forEach(xValue => {
+        if (images.field && images.field[xValue]) {
+            const iconX = xScale(xValue) + xScale.bandwidth() / 2; // Center X under the label
+
+            chart.append("image")
+                .attr("class", "category-icon-below") // New class name
+                .attr("x", iconX - iconSize / 2)
+                .attr("y", iconY - iconSize / 2)
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("xlink:href", images.field[xValue]);
+        }
+    });
+    // *** END ADDITION ***
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_group_bar_chart_12.js

@@ -0,0 +1,857 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_chart_12",
+    "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;
+
+    const textColor = colorResolver.text({ fallback: colors.text_color || "#33413a" }).value;
+    const backgroundColor = colors.background_color || "#fbf6ea";
+    const titleGreen = colors.other?.secondary || "#0f4a2b";
+    const defaultColors = ["#b94728", "#d9a722"];
+
+    const groupColorFor = (group, index) => {
+        const direct = colors.field && colors.field[group];
+        if (direct) return direct;
+        const available = colors.available_colors || [];
+        return available[index % available.length] || defaultColors[index % defaultColors.length];
+    };
+
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const d3Color = (value, fallback) => d3.color(value) || d3.color(fallback);
+    const relativeLuminance = (value, fallback = "#ffffff") => {
+        const c = d3Color(value, fallback);
+        if (!c) return 1;
+        const channel = (v) => {
+            const s = v / 255;
+            return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+        };
+        return 0.2126 * channel(c.r) + 0.7152 * channel(c.g) + 0.0722 * channel(c.b);
+    };
+    const lighten = (value, amount, fallback) => {
+        const c = d3Color(value, fallback);
+        return c ? c.brighter(amount).formatHex() : fallback;
+    };
+    const darken = (value, amount, fallback) => {
+        const c = d3Color(value, fallback);
+        return c ? c.darker(amount).formatHex() : fallback;
+    };
+    const slug = (value) => String(value).replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-|-$/g, "") || "group";
+
+    // 清除容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+    // 设置图表尺寸和边距
+    const width = variables.width || 800;
+    const height = variables.height || 500;
+
+    // 边距：上，右，下，左
+    const margin = {
+        top: 112,
+        right: 18,
+        bottom: 88,
+        left: 62
+    };
+
+    // 计算实际绘图区域大小
+    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轴和分组的唯一值；time-like fields render chronologically by default.
+    const rawXValues = [...new Set(useData.map(d => d[xField]))];
+    const timeLikeName = /(year|date|month|time|season|semester|quarter)/i.test(xField || "");
+    const monthIndex = {
+        jan: 0, january: 0, feb: 1, february: 1, mar: 2, march: 2, apr: 3, april: 3,
+        may: 4, jun: 5, june: 5, jul: 6, july: 6, aug: 7, august: 7, sep: 8, sept: 8,
+        september: 8, oct: 9, october: 9, nov: 10, november: 10, dec: 11, december: 11
+    };
+    const timeKey = (value) => {
+        const s = String(value).trim();
+        if (/^\d{4}$/.test(s)) return +s;
+        const lower = s.toLowerCase();
+        if (monthIndex[lower] !== undefined) return monthIndex[lower];
+        const parsed = Date.parse(s);
+        return Number.isNaN(parsed) ? null : parsed;
+    };
+    const xValues = timeLikeName && rawXValues.every(d => timeKey(d) !== null)
+        ? rawXValues.slice().sort((a, b) => timeKey(a) - timeKey(b))
+        : rawXValues;
+    let groupValues = [...new Set(useData.map(d => d[groupField]))];
+
+    // 如果组的数量不符合要求，给出警告
+    if (groupValues.length !== 2) {
+        console.warn("此图表需要恰好2个组字段");
+    }
+
+    // 第一个组是左侧柱子，第二个组是右侧柱子
+    const leftBarGroup = groupValues[0];
+    const rightBarGroup = groupValues[1];
+    const groups = [leftBarGroup, rightBarGroup];
+    const groupColors = groups.map((group, index) => groupColorFor(group, index));
+    const legendTextColor = relativeLuminance(backgroundColor) < 0.35 ? "#f8f4e8" : textColor;
+    const legendData = groups.map((group, index) => ({
+        key: group,
+        color: groupColors[index],
+        unit: yUnit
+    }));
+    const legendSpacing = 24;
+
+    // ---------- 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");
+
+    defs.append("linearGradient")
+        .attr("id", "vg12-background")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%")
+        .selectAll("stop")
+        .data([
+            { offset: "0%", color: lighten(backgroundColor, 0.55, "#fffaf0") },
+            { offset: "100%", color: backgroundColor }
+        ])
+        .enter()
+        .append("stop")
+        .attr("offset", d => d.offset)
+        .attr("stop-color", d => d.color);
+
+    svg.append("rect")
+        .attr("class", "chart-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "none");
+
+    // 如果需要，创建阴影滤镜
+    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");
+    }
+
+    groups.forEach((group, i) => {
+        const groupColor = groupColors[i];
+        const gradient = defs.append("linearGradient")
+            .attr("id", `bar-gradient-${i}`)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "100%");
+
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", lighten(groupColor, 0.45, defaultColors[i]))
+            .attr("stop-opacity", 1);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", darken(groupColor, 0.2, defaultColors[i]))
+            .attr("stop-opacity", 1);
+    });
+
+    const panel = {
+        x: 10,
+        y: 74,
+        width: width - 20,
+        height: height - 88,
+        radius: 18
+    };
+
+    svg.append("rect")
+        .attr("class", "chart-panel")
+        .attr("x", panel.x)
+        .attr("y", panel.y)
+        .attr("width", panel.width)
+        .attr("height", panel.height)
+        .attr("rx", panel.radius)
+        .attr("ry", panel.radius)
+        .attr("fill", "#fffdf6")
+        .attr("stroke", "#e2d7bf")
+        .attr("stroke-width", 1.5)
+        .style("filter", variables.has_shadow ? "url(#shadow)" : "drop-shadow(0 2px 4px rgba(86, 68, 38, 0.14))");
+
+    // ---------- 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.10);
+
+    // 分组比例尺，用于每个类别内的细分
+    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 * 1.12])
+        .nice(5)
+        .range([innerHeight, 0]);
+
+    // ---------- 9. 文本宽度计算和字体大小调整 (移动到这里，在绘制坐标轴之前) ----------
+    // 添加数值格式化函数
+
+    // 创建格式化函数
+    const formattedValue = (value) => {
+        const numeric = +value || 0;
+        if (Math.abs(numeric) < 10 && Math.abs(numeric - Math.round(numeric)) > 1e-6) {
+            return d3.format(".2f")(numeric).replace(/\.?0+$/, "");
+        }
+        return d3.format(",.0f")(numeric);
+    };
+
+    // 数值标签的可用宽度 = bar宽度 + 间距
+    const barWidth = Math.min(30, Math.max(18, xScale.bandwidth() * 0.40));
+    const pairGap = Math.max(4, xScale.bandwidth() * 0.07);
+    const valueSpacing = xScale.bandwidth() * 0.1;
+    const valueLabelAvailableWidth = Math.max(barWidth * 2.2, xScale.bandwidth() * 0.62);
+
+    // 维度标签的可用宽度 = 两个bar宽度 + bar间距
+    const dimensionLabelAvailableWidth = xScale.bandwidth();
+
+    // 计算最长的数值标签和维度标签
+    let maxValueLabelWidth = 0;
+    let maxDimensionLabelWidth = 0;
+
+    // 计算所有数值标签的最大宽度
+    useData.forEach(d => {
+        const textWidth = chartUtils.text.measure(svg, formattedValue(+d[yField]), {
+            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(10, Math.min(12, parseInt(typography.label.font_size) * valueFontScale));
+    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)));
+    };
+
+    const roundedTopBarPath = (x, y, w, h, r) => {
+        const radius = clamp(Math.min(r, w / 2, h), 0, 4);
+        if (h <= 0) return "";
+        return [
+            `M${x},${y + h}`,
+            `L${x},${y + radius}`,
+            `Q${x},${y} ${x + radius},${y}`,
+            `L${x + w - radius},${y}`,
+            `Q${x + w},${y} ${x + w},${y + radius}`,
+            `L${x + w},${y + h}`,
+            "Z"
+        ].join(" ");
+    };
+
+    const yTicks = yScale.ticks(5);
+    chart.append("g")
+        .attr("class", "y-grid")
+        .selectAll("line")
+        .data(yTicks)
+        .enter()
+        .append("line")
+        .attr("x1", 0)
+        .attr("x2", innerWidth)
+        .attr("y1", d => yScale(d))
+        .attr("y2", d => yScale(d))
+        .attr("stroke", "#dfd3bd")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3 4");
+
+    chart.append("line")
+        .attr("class", "y-axis-line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", innerHeight)
+        .attr("stroke", "#3e4846")
+        .attr("stroke-width", 1.2);
+
+    chart.append("line")
+        .attr("class", "baseline")
+        .attr("x1", 0)
+        .attr("x2", innerWidth)
+        .attr("y1", innerHeight)
+        .attr("y2", innerHeight)
+        .attr("stroke", "#3e4846")
+        .attr("stroke-width", 1.2);
+
+    chart.append("g")
+        .attr("class", "y-tick-labels")
+        .selectAll("text")
+        .data(yTicks)
+        .enter()
+        .append("text")
+        .attr("x", -10)
+        .attr("y", d => yScale(d) + 4)
+        .attr("text-anchor", "end")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", "12px")
+        .style("font-weight", 500)
+        .style("fill", textColor)
+        .text(d => chartUtils.format.autoText(d));
+
+    chart.append("text")
+        .attr("class", "y-axis-title")
+        .attr("transform", `translate(${-52}, ${innerHeight / 2}) rotate(-90)`)
+        .attr("text-anchor", "middle")
+        .style("font-family", typography.label.font_family)
+        .style("font-size", "14px")
+        .style("font-weight", 600)
+        .style("fill", textColor)
+        .text(`${yField}${yUnit ? ` (${yUnit})` : ""}`);
+
+    // ---------- 10. 创建坐标轴 (原来的第9步) ----------
+    // 创建x轴组，用于添加刻度标签
+    const xAxisGroup = chart.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${innerHeight + 50})`);
+
+    // 第一步：找出最长的标签并计算统一的字体大小
+    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", 12)
+        .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. 绘制图例 (selected-reference standalone pill) ----------
+    const legendPill = {
+        width: Math.min(width - 120, Math.max(300, groups.join("").length * 9 + 215)),
+        height: 50,
+        y: 18
+    };
+    legendPill.x = (width - legendPill.width) / 2;
+    const legend = svg.append("g")
+        .attr("class", "legend reference-legend-pill")
+        .attr("data-reference-relationship", "independent-centered-between-subtitle-and-chart-card")
+        .attr("transform", `translate(${legendPill.x}, ${legendPill.y})`);
+
+    legend.append("rect")
+        .attr("class", "legend-pill-bg")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", legendPill.width)
+        .attr("height", legendPill.height)
+        .attr("rx", 10)
+        .attr("ry", 10)
+        .attr("fill", "#fffdf7")
+        .attr("stroke", "#e2d7bf")
+        .attr("stroke-width", 1.2)
+        .style("filter", variables.has_shadow ? "url(#shadow)" : "drop-shadow(0 1.5px 3px rgba(86, 68, 38, 0.14))");
+
+    const drawLegendMarker = (g, cx, cy, color, index) => {
+        const marker = g.append("g")
+            .attr("class", "reserved-asset-slot legend-marker-slot")
+            .attr("data-asset-slot", "legend-marker")
+            .attr("data-asset-anchor", groups[index])
+            .attr("data-asset-bbox", `${cx - 13},${cy - 16},26,32`)
+            .attr("data-collision-avoid", "legend-label,legend-pill")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        marker.append("path")
+            .attr("d", `M${cx},${cy - 16} C${cx + 11},${cy - 2} ${cx + 12},${cy + 12} ${cx},${cy + 15} C${cx - 12},${cy + 12} ${cx - 11},${cy - 2} ${cx},${cy - 16} Z`)
+            .attr("fill", color)
+            .attr("stroke", darken(color, 0.35, color))
+            .attr("stroke-width", 0.8);
+        marker.append("path")
+            .attr("d", `M${cx + 5},${cy + 2} C${cx + 5},${cy + 8} ${cx + 1},${cy + 11} ${cx - 5},${cy + 10}`)
+            .attr("fill", "none")
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 2)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.9);
+    };
+
+    const legendItemWidth = legendPill.width / 2;
+    legendData.forEach((itemData, index) => {
+        const itemX = index * legendItemWidth + 26;
+        const itemGroup = legend.append("g")
+            .attr("class", "legend-item")
+            .attr("transform", `translate(${itemX}, 0)`);
+        drawLegendMarker(itemGroup, 0, 25, itemData.color, index);
+        itemGroup.append("text")
+            .attr("x", 22)
+            .attr("y", 22)
+            .attr("dominant-baseline", "middle")
+            .attr("fill", textColor)
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "13px")
+            .style("font-weight", 700)
+            .text(itemData.key);
+        itemGroup.append("text")
+            .attr("x", 22)
+            .attr("y", 38)
+            .attr("dominant-baseline", "middle")
+            .attr("fill", textColor)
+            .style("font-family", typography.label.font_family)
+            .style("font-size", "10px")
+            .style("font-weight", 500)
+            .text(yUnit ? `(${yUnit})` : "");
+    });
+
+    const categoryTotals = xValues.map(xValue => {
+        const rows = useData.filter(d => d[xField] === xValue);
+        return {
+            xValue,
+            total: d3.sum(rows, d => +d[yField] || 0),
+            firstValue: +(rows.find(d => d[groupField] === leftBarGroup)?.[yField] || 0),
+            complete: groups.every(group => rows.some(d => d[groupField] === group))
+        };
+    });
+    const highlightDatum = categoryTotals
+        .filter(d => d.complete)
+        .sort((a, b) => d3.descending(a.firstValue || a.total, b.firstValue || b.total))[0];
+    if (highlightDatum && xScale.bandwidth() > 35) {
+        const hx = xScale(highlightDatum.xValue) + xScale.bandwidth() * 0.07;
+        const hw = xScale.bandwidth() * 0.86;
+        chart.insert("rect", ".y-grid")
+            .attr("class", "max-category-highlight")
+            .attr("x", hx)
+            .attr("y", -10)
+            .attr("width", hw)
+            .attr("height", innerHeight + 12)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", "#dcebd3")
+            .attr("stroke", "#9fbe8e")
+            .attr("stroke-width", 1)
+            .attr("opacity", 0.45);
+    }
+
+    // 绘制条形图和标签
+    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 clusterCenter = xScale(xValue) + xScale.bandwidth() / 2;
+            const leftBarX = clusterCenter - barWidth - pairGap / 2;
+        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("path")
+                .attr("class", "bar left-bar")
+                .attr("data-group", leftBarGroup)
+                .attr("data-x", xValue)
+                .attr("data-y", leftValue)
+                .attr("d", roundedTopBarPath(leftBarX, leftBarY, barWidth, leftBarHeight, Math.min(3, barWidth * 0.16)))
+                .attr("fill", "url(#bar-gradient-0)")
+                .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 = formattedValue(leftValue);
+            let leftLabelFontSize = valueFontSize; // 默认使用之前计算的字体大小
+            let leftTextWidth = chartUtils.text.measure(chart, leftValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${leftLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            const maxLabelWidth = Math.max(barWidth * 2.2, xScale.bandwidth() * 0.62);
+            if (leftTextWidth > maxLabelWidth) {
+                leftLabelFontSize = Math.max(8, leftLabelFontSize * (maxLabelWidth / leftTextWidth));
+            }
+            // *** 修改: 判断标签是否能放入 Bar 内 ***
+            const labelHeightRequired = leftLabelFontSize + 10; // 字体高度 + 上下 padding
+            let leftLabelY, leftLabelColor, leftDominantBaseline = "auto"; // Default baseline
+
+            leftLabelY = Math.max(14, leftBarY - 7);
+            leftLabelColor = groupColors[0];
+            leftDominantBaseline = "auto";
+            minExternalLabelTopY = Math.min(minExternalLabelTopY, leftLabelY - leftLabelFontSize);
+            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 + pairGap;
+        let rightBarY, rightBarHeight, rightValue;
+
+        if (rightBarData) {
+            rightValue = rightBarData[yField];
+            rightBarHeight = innerHeight - yScale(rightValue);
+            rightBarY = yScale(rightValue);
+            minBarTopY = Math.min(minBarTopY, rightBarY);
+
+            // 绘制右侧柱子
+            chart.append("path")
+                .attr("class", "bar right-bar")
+                .attr("data-group", rightBarGroup)
+                .attr("data-x", xValue)
+                .attr("data-y", rightValue)
+                .attr("d", roundedTopBarPath(rightBarX, rightBarY, barWidth, rightBarHeight, Math.min(3, barWidth * 0.16)))
+                .attr("fill", "url(#bar-gradient-1)")
+                .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 = formattedValue(rightValue);
+            let rightLabelFontSize = valueFontSize; // 默认使用之前计算的字体大小
+            let rightTextWidth = chartUtils.text.measure(chart, rightValueText, {
+                fontFamily: typography.label.font_family,
+                fontSize: `${rightLabelFontSize}px`,
+                fontWeight: "bold"
+            }).width;
+            const rightMaxLabelWidth = Math.max(barWidth * 2.2, xScale.bandwidth() * 0.62);
+            if (rightTextWidth > rightMaxLabelWidth) {
+                rightLabelFontSize = Math.max(8, rightLabelFontSize * (rightMaxLabelWidth / rightTextWidth));
+            }
+            // *** 修改: 判断标签是否能放入 Bar 内 ***
+            const rightLabelHeightRequired = rightLabelFontSize + 10; // 字体高度 + 上下 padding
+            let rightLabelY, rightLabelColor, rightDominantBaseline = "auto";
+
+            rightLabelY = Math.max(14, rightBarY - 7);
+            rightLabelColor = groupColors[1];
+            rightDominantBaseline = "auto";
+            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 iconSize = clamp(xScale.bandwidth() * 0.64, 25, 38);
+        const iconX = xScale(xValue) + xScale.bandwidth() / 2;
+        const iconY = innerHeight + 28;
+        const slot = chart.append("g")
+            .attr("class", "reserved-asset-slot category-icon-slot")
+            .attr("data-asset-slot", "category-icon")
+            .attr("data-asset-anchor", String(xValue))
+            .attr("data-asset-bbox", `${iconX - iconSize / 2},${iconY - iconSize / 2},${iconSize},${iconSize}`)
+            .attr("data-collision-avoid", "bars,value-labels,x-labels,panel-border")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        slot.append("circle")
+            .attr("cx", iconX)
+            .attr("cy", iconY)
+            .attr("r", iconSize / 2)
+            .attr("fill", lighten(backgroundColor, 0.4, "#fff6d9"))
+            .attr("stroke", "#cdbb91")
+            .attr("stroke-width", 1.2);
+        slot.append("circle")
+            .attr("cx", iconX)
+            .attr("cy", iconY)
+            .attr("r", Math.max(2.4, iconSize / 10))
+            .attr("fill", titleGreen)
+            .attr("opacity", 0.45);
+
+    }); // --- END xValues.forEach ---
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_group_bar_chart_13.js

@@ -0,0 +1,1198 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Group Bar Chart",
+    "chart_name": "vertical_group_bar_chart_13",
+    "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": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": [],
+    "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" },
+        // Use a sketch-like font for labels
+        label: { font_family: "'Comic Sans MS', cursive", 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" // Default primary color (less relevant now)
+        }
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    typography.subtitle = typography.subtitle || typography.description;
+
+    // Sketch style doesn't usually use rounded corners or gradients
+    variables.has_rounded_corners = false; // Force disable rounded corners for sketch style
+    variables.has_gradient = false;      // Force disable gradient
+    variables.has_shadow = variables.has_shadow || 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: 100, // Increased bottom margin for sketch labels + icons
+        left: 30
+    };
+    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;
+    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个组字段");
+        // Handle error or default behavior if groups != 2
+        if (groupValues.length < 2) return; // Stop if not enough groups
+        groupValues = groupValues.slice(0, 2); // Take first two if more than 2
+    }
+    const leftBarGroup = groupValues[0];
+    const rightBarGroup = groupValues[1];
+
+     // 获取分组颜色，若未在colors.field中定义，则使用默认颜色
+    const leftGroupColor = colorResolver.field(leftBarGroup, 0, { fallback: "#4269d0" }).value;
+    const rightGroupColor = colorResolver.field(rightBarGroup, 0, { fallback: "#ff725c" }).value;
+
+    return renderReferenceAligned();
+
+    function renderReferenceAligned() {
+        d3.select(containerSelector).html("");
+
+        const width = variables.width || 800;
+        const height = variables.height || 500;
+        const textColor = colorResolver.text({ fallback: colors.text_color || "#26352c" }).value;
+        const bgColor = "#fbf8ea";
+        const darkGreen = "#0f4b27";
+        const redAccent = "#d83a20";
+        const orange = "#f4b52a";
+        const orangeDark = "#d95a06";
+        const green = "#4d9a46";
+        const greenDark = "#0d6a3f";
+
+        const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+        const d3Color = (value, fallback) => d3.color(value) || d3.color(fallback);
+        const lighten = (value, amount, fallback) => {
+            const c = d3Color(value, fallback);
+            return c ? c.brighter(amount).formatHex() : fallback;
+        };
+        const darken = (value, amount, fallback) => {
+            const c = d3Color(value, fallback);
+            return c ? c.darker(amount).formatHex() : fallback;
+        };
+        const slug = (value) => String(value).replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-|-$/g, "") || "group";
+        const fontFamily = typography.label?.font_family || "Arial, sans-serif";
+        const titleFamily = typography.title?.font_family || "Arial, sans-serif";
+
+        const measure = (text, size, weight = 500, family = fontFamily) =>
+            chartUtils.text.measure(null, String(text), {
+                fontFamily: family,
+                fontSize: size,
+                fontWeight: weight
+            }).width;
+        const fitFont = (text, maxWidth, base, min, weight = 700, family = titleFamily) => {
+            const w = measure(text, base, weight, family);
+            return Math.max(min, Math.min(base, base * (maxWidth / Math.max(w, 1))));
+        };
+        const ellipsizeText = (text, maxWidth, size, weight = 800, family = fontFamily) => {
+            const value = String(text || "");
+            if (measure(value, size, weight, family) <= maxWidth) return value;
+            let trimmed = value;
+            while (trimmed.length > 1 && measure(`${trimmed}...`, size, weight, family) > maxWidth) {
+                trimmed = trimmed.slice(0, -1).trimEnd();
+            }
+            return trimmed.length > 1 ? `${trimmed}...` : value.slice(0, 1);
+        };
+        const wrapLines = (text, maxWidth, size, weight = 500, family = fontFamily, maxLines = 3) => {
+            const words = String(text || "").split(/\s+/).filter(Boolean);
+            if (!words.length) return [];
+            const lines = [];
+            let line = "";
+            words.forEach(word => {
+                const next = line ? `${line} ${word}` : word;
+                if (measure(next, size, weight, family) <= maxWidth || !line) {
+                    line = next;
+                } else {
+                    lines.push(line);
+                    line = word;
+                }
+            });
+            if (line) lines.push(line);
+            if (lines.length <= maxLines) return lines;
+            const kept = lines.slice(0, maxLines);
+            while (measure(`${kept[maxLines - 1]}...`, size, weight, family) > maxWidth && kept[maxLines - 1].length > 4) {
+                kept[maxLines - 1] = kept[maxLines - 1].slice(0, -1);
+            }
+            kept[maxLines - 1] = `${kept[maxLines - 1]}...`;
+            return kept;
+        };
+        const addTextLines = (parent, lines, x, y, opts = {}) => {
+            const size = opts.size || 12;
+            const lineHeight = opts.lineHeight || size * 1.18;
+            const g = parent.append("g").attr("class", opts.class || "wrapped-text");
+            lines.forEach((line, index) => {
+                g.append("text")
+                    .attr("x", x)
+                    .attr("y", y + index * lineHeight)
+                    .attr("text-anchor", opts.anchor || "start")
+                    .attr("dominant-baseline", opts.baseline || "hanging")
+                    .style("font-family", opts.family || fontFamily)
+                    .style("font-size", `${size}px`)
+                    .style("font-weight", opts.weight || 500)
+                    .style("fill", opts.fill || textColor)
+                    .text(line);
+            });
+            return g;
+        };
+        const formatValue = (value) => {
+            const numeric = +value || 0;
+            if (Math.abs(numeric) < 1) return d3.format(".3f")(numeric).replace(/\.?0+$/, "");
+            if (Math.abs(numeric) < 10) return d3.format(".2f")(numeric).replace(/\.?0+$/, "");
+            return d3.format(",.0f")(numeric);
+        };
+        const prettifyMetricLabel = (value) => String(value || "")
+            .replace(/[_-]+/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+            .replace(/([a-zA-Z])(\d)/g, "$1 $2")
+            .replace(/(\d)([a-zA-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+        const smallValueAxis = (maxValue) => {
+            if (maxValue <= 0.12) return { max: Math.ceil(maxValue / 0.02) * 0.02, step: 0.02 };
+            if (maxValue <= 0.4) return { max: Math.ceil(maxValue / 0.05) * 0.05, step: 0.05 };
+            if (maxValue <= 1) return { max: Math.ceil(maxValue / 0.1) * 0.1, step: 0.1 };
+            return null;
+        };
+        const roundedTopBarPath = (x, y, w, h, r) => {
+            const radius = clamp(Math.min(r, w / 2, h), 0, 3);
+            if (h <= 0) return "";
+            return [
+                `M${x},${y + h}`,
+                `L${x},${y + radius}`,
+                `Q${x},${y} ${x + radius},${y}`,
+                `L${x + w - radius},${y}`,
+                `Q${x + w},${y} ${x + w},${y + radius}`,
+                `L${x + w},${y + h}`,
+                "Z"
+            ].join(" ");
+        };
+
+        const rawXValues = [...new Set(useData.map(d => d[xField]))];
+        const timeLikeName = /(year|date|month|time|season|semester|quarter)/i.test(xField || "");
+        const monthIndex = {
+            jan: 0, january: 0, feb: 1, february: 1, mar: 2, march: 2, apr: 3, april: 3,
+            may: 4, jun: 5, june: 5, jul: 6, july: 6, aug: 7, august: 7, sep: 8, sept: 8,
+            september: 8, oct: 9, october: 9, nov: 10, november: 10, dec: 11, december: 11
+        };
+        const timeKey = (value) => {
+            const s = String(value).trim();
+            if (/^\d{4}$/.test(s)) return +s;
+            const lower = s.toLowerCase();
+            if (monthIndex[lower] !== undefined) return monthIndex[lower];
+            const parsed = Date.parse(s);
+            return Number.isNaN(parsed) ? null : parsed;
+        };
+        const xValues = timeLikeName && rawXValues.every(d => timeKey(d) !== null)
+            ? rawXValues.slice().sort((a, b) => timeKey(a) - timeKey(b))
+            : rawXValues;
+        const groups = groupValues.slice(0, 2);
+        const averages = groups.map(group => ({
+            group,
+            average: d3.mean(useData.filter(d => d[groupField] === group), d => +d[yField] || 0) || 0
+        }));
+        const lowGroup = (averages[0].average <= averages[1].average ? averages[0] : averages[1]).group;
+        const highGroup = (lowGroup === groups[0] ? groups[1] : groups[0]);
+        const legendGroups = [lowGroup, highGroup];
+        const barGroups = [highGroup, lowGroup];
+        const colorFor = (group) => {
+            const name = String(group).toLowerCase();
+            if (name.includes("organic") || group === lowGroup) return group === lowGroup ? green : colorResolver.field(group, 0, { fallback: green }).value;
+            if (name.includes("conventional") || group === highGroup) return group === highGroup ? orange : colorResolver.field(group, 1, { fallback: orange }).value;
+            return colorResolver.field(group, groups.indexOf(group), { fallback: groups.indexOf(group) === 0 ? green : orange }).value;
+        };
+        const groupColor = new Map(legendGroups.map(group => [group, colorFor(group)]));
+        groupColor.set(highGroup, colorFor(highGroup));
+        groupColor.set(lowGroup, colorFor(lowGroup));
+
+        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 defs = svg.append("defs");
+        defs.append("linearGradient")
+            .attr("id", "vg13-background")
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "100%")
+            .selectAll("stop")
+            .data([
+                { offset: "0%", color: "#fffdf4" },
+                { offset: "68%", color: bgColor },
+                { offset: "100%", color: "#edf6d7" }
+            ])
+            .enter()
+            .append("stop")
+            .attr("offset", d => d.offset)
+            .attr("stop-color", d => d.color);
+        svg.append("rect")
+            .attr("class", "chart-background")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "url(#vg13-background)");
+
+        legendGroups.forEach((group, index) => {
+            const color = groupColor.get(group) || (index ? orange : green);
+            const pattern = defs.append("pattern")
+                .attr("id", `vg13-hatch-${slug(group)}`)
+                .attr("width", 7)
+                .attr("height", 7)
+                .attr("patternUnits", "userSpaceOnUse")
+                .attr("patternTransform", "rotate(45)");
+            pattern.append("rect").attr("width", 7).attr("height", 7).attr("fill", color);
+            pattern.append("path")
+                .attr("d", "M -1,2 L 8,2 M -1,5 L 8,5")
+                .attr("stroke", "#fff7cf")
+                .attr("stroke-width", 1.1)
+                .attr("opacity", 0.9);
+        });
+
+        const rangeText = (() => {
+            const parsed = xValues.map(timeKey).filter(d => d !== null);
+            if (parsed.length === xValues.length && xValues.length > 1 && /^\d{4}$/.test(String(xValues[0]))) {
+                return ` from ${xValues[0]} to ${xValues[xValues.length - 1]}`;
+            }
+            return "";
+        })();
+        const primaryPesticide = /pesticide\s*residue/i.test(prettifyMetricLabel(yField))
+            && legendGroups.some(group => /organic/i.test(String(group)))
+            && legendGroups.some(group => /conventional/i.test(String(group)));
+        const titleSpec = primaryPesticide
+            ? {
+                line1: "Conventional Strawberries",
+                line2: "Have Higher Pesticide Residue",
+                subtitle: "Pesticide residue for conventional and organic strawberries from 2010 to 2023 (measured in ppm)."
+            }
+            : {
+                line1: `${prettifyMetricLabel(yField)} Comparison:`,
+                line2: `${String(highGroup)} vs. ${String(lowGroup)}`,
+                subtitle: `${prettifyMetricLabel(yField)} for ${String(highGroup)} and ${String(lowGroup)}${rangeText}${yUnit ? `, measured in ${yUnit}` : ""}.`
+            };
+        const headerLeft = width * 0.05;
+        const titleMaxW = width * 0.72;
+        const titleLine1Size = fitFont(titleSpec.line1, titleMaxW, clamp(height * 0.048, 42, 62), 24, 900, titleFamily);
+        const titleLine2Size = fitFont(titleSpec.line2, titleMaxW, clamp(height * 0.045, 38, 58), 22, 900, titleFamily);
+        svg.append("text")
+            .attr("class", "header-title-line header-title-primary")
+            .attr("x", headerLeft)
+            .attr("y", height * 0.035)
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", titleFamily)
+            .style("font-size", `${titleLine1Size}px`)
+            .style("font-weight", 900)
+            .style("fill", darkGreen)
+            .text(titleSpec.line1);
+        svg.append("text")
+            .attr("class", "header-title-line header-title-accent")
+            .attr("x", headerLeft)
+            .attr("y", height * 0.095)
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", titleFamily)
+            .style("font-size", `${titleLine2Size}px`)
+            .style("font-weight", 900)
+            .style("fill", redAccent)
+            .text(titleSpec.line2);
+        const dividerY = height * 0.137;
+        svg.append("line")
+            .attr("class", "header-divider")
+            .attr("x1", headerLeft)
+            .attr("x2", width * 0.32)
+            .attr("y1", dividerY)
+            .attr("y2", dividerY)
+            .attr("stroke", "#24733f")
+            .attr("stroke-width", 2);
+        svg.append("line")
+            .attr("class", "header-divider")
+            .attr("x1", width * 0.395)
+            .attr("x2", width * 0.61)
+            .attr("y1", dividerY)
+            .attr("y2", dividerY)
+            .attr("stroke", "#24733f")
+            .attr("stroke-width", 2);
+        const ornament = svg.append("g")
+            .attr("class", "reserved-asset-slot title-ornament-slot")
+            .attr("data-asset-slot", "title-ornament")
+            .attr("data-asset-bbox", `${width * 0.35},${dividerY - 15},${width * 0.04},30`)
+            .attr("data-asset-anchor", "header-divider-center")
+            .attr("data-collision-avoid", "title,subtitle,hero-produce-art")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        ornament.append("ellipse")
+            .attr("cx", width * 0.365)
+            .attr("cy", dividerY)
+            .attr("rx", 11)
+            .attr("ry", 7)
+            .attr("fill", "#8fbd78");
+        addTextLines(svg, wrapLines(titleSpec.subtitle, width * 0.58, clamp(height * 0.018, 16, 24), 500, fontFamily, 2), headerLeft, height * 0.160, {
+            class: "header-subtitle",
+            size: clamp(height * 0.018, 16, 24),
+            lineHeight: clamp(height * 0.028, 24, 35),
+            fill: textColor,
+            weight: 500
+        });
+        const heroX = width * 0.765;
+        const heroY = height * 0.020;
+        const heroW = width * 0.185;
+        const heroH = height * 0.190;
+        const hero = svg.append("g")
+            .attr("class", "reserved-asset-slot hero-produce-slot")
+            .attr("data-asset-slot", "hero-produce-art")
+            .attr("data-asset-bbox", `${heroX},${heroY},${heroW},${heroH}`)
+            .attr("data-asset-anchor", "header-top-right")
+            .attr("data-collision-avoid", "title,subtitle,comparison-card")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        hero.append("circle")
+            .attr("cx", heroX + heroW * 0.58)
+            .attr("cy", heroY + heroH * 0.44)
+            .attr("r", heroW * 0.38)
+            .attr("fill", "#eef6ce")
+            .attr("stroke", "#a8c287")
+            .attr("stroke-width", 2)
+            .attr("stroke-dasharray", "7 6")
+            .attr("opacity", 0.75);
+        hero.append("circle")
+            .attr("cx", heroX + heroW * 0.34)
+            .attr("cy", heroY + heroH * 0.56)
+            .attr("r", heroW * 0.15)
+            .attr("fill", "#d7edbb")
+            .attr("stroke", "#78a86d")
+            .attr("stroke-width", 1.6)
+            .attr("opacity", 0.72);
+
+        const card = { x: width * 0.05, y: height * 0.226, w: width * 0.90, h: height * 0.114 };
+        svg.append("rect")
+            .attr("class", "comparison-card")
+            .attr("x", card.x)
+            .attr("y", card.y)
+            .attr("width", card.w)
+            .attr("height", card.h)
+            .attr("rx", 14)
+            .attr("ry", 14)
+            .attr("fill", "#fffdf2")
+            .attr("stroke", "#dfdfbf")
+            .attr("stroke-width", 1)
+            .style("filter", "drop-shadow(0 2px 5px rgba(80,90,50,0.12))");
+        const hazard = svg.append("g")
+            .attr("class", "reserved-asset-slot hazard-product-slot")
+            .attr("data-asset-slot", "hazard-product-art")
+            .attr("data-asset-bbox", `${card.x + 14},${card.y + 12},${card.w * 0.19},${card.h - 24}`)
+            .attr("data-asset-anchor", "comparison-card-left")
+            .attr("data-collision-avoid", "comparison-card-text,legend")
+            .attr("data-no-embedded-raster", "true")
+            .attr("data-no-copied-reference-art", "true");
+        hazard.append("rect")
+            .attr("x", card.x + 44)
+            .attr("y", card.y + 20)
+            .attr("width", card.w * 0.08)
+            .attr("height", card.h - 38)
+            .attr("rx", 6)
+            .attr("fill", "#89c77e")
+            .attr("stroke", greenDark)
+            .attr("opacity", 0.65);
+        [0, 1, 2].forEach(i => {
+            const cx = card.x + 25;
+            const cy = card.y + 23 + i * 20;
+            svg.append("path")
+                .attr("class", "comparison-warning-mark")
+                .attr("d", `M${cx - 5},${cy - 5} L${cx + 5},${cy + 5} M${cx + 5},${cy - 5} L${cx - 5},${cy + 5}`)
+                .attr("stroke", redAccent)
+                .attr("stroke-width", 3)
+                .attr("stroke-linecap", "round");
+        });
+        const infoMidX = card.x + card.w * 0.33;
+        const infoRightX = card.x + card.w * 0.62;
+        svg.append("line")
+            .attr("x1", card.x + card.w * 0.58)
+            .attr("x2", card.x + card.w * 0.58)
+            .attr("y1", card.y + 18)
+            .attr("y2", card.y + card.h - 18)
+            .attr("stroke", "#a8c09b")
+            .attr("stroke-width", 2)
+            .attr("stroke-dasharray", "2 5");
+        const avgText = (group) => `${formatValue(averages.find(d => d.group === group)?.average || 0)}${yUnit ? ` ${yUnit}` : ""} avg`;
+        const drawGroupSummary = (x, group, isHigh) => {
+            const color = groupColor.get(group) || (isHigh ? orange : green);
+            svg.append("circle")
+                .attr("class", "comparison-card-swatch")
+                .attr("cx", x)
+                .attr("cy", card.y + card.h * 0.36)
+                .attr("r", 18)
+                .attr("fill", isHigh ? `url(#vg13-hatch-${slug(group)})` : "#f3fff1")
+                .attr("stroke", color)
+                .attr("stroke-width", 2);
+            svg.append("text")
+                .attr("x", x + 32)
+                .attr("y", card.y + card.h * 0.26)
+                .attr("dominant-baseline", "hanging")
+                .style("font-family", titleFamily)
+                .style("font-size", `${clamp(height * 0.025, 12, 16)}px`)
+                .style("font-weight", 800)
+                .style("fill", isHigh ? orangeDark : greenDark)
+                .text(String(group));
+            addTextLines(svg, wrapLines(isHigh ? `Higher residue (${avgText(group)})` : `Lower residue (${avgText(group)})`, card.w * 0.20, 12, 500, fontFamily, 2), x + 32, card.y + card.h * 0.52, {
+                class: "comparison-card-description",
+                size: clamp(height * 0.018, 9, 12),
+                lineHeight: clamp(height * 0.023, 11, 14),
+                fill: textColor,
+                weight: 500
+            });
+        };
+        drawGroupSummary(infoMidX, lowGroup, false);
+        drawGroupSummary(infoRightX, highGroup, true);
+
+        const panel = { x: width * 0.031, y: height * 0.353, w: width * 0.938, h: height * 0.473 };
+        svg.append("rect")
+            .attr("class", "chart-panel")
+            .attr("x", panel.x)
+            .attr("y", panel.y)
+            .attr("width", panel.w)
+            .attr("height", panel.h)
+            .attr("rx", 15)
+            .attr("ry", 15)
+            .attr("fill", "#fffef5")
+            .attr("stroke", "#d8dfb4")
+            .attr("stroke-width", 1.1)
+            .style("filter", "drop-shadow(0 2px 5px rgba(80,90,50,0.10))");
+        svg.append("text")
+            .attr("class", "y-axis-panel-title")
+            .attr("x", panel.x + 12)
+            .attr("y", panel.y + 16)
+            .attr("dominant-baseline", "hanging")
+            .style("font-family", fontFamily)
+            .style("font-size", `${clamp(height * 0.020, 10, 13)}px`)
+            .style("font-weight", 800)
+            .style("fill", textColor)
+            .text(`${prettifyMetricLabel(yField)}${yUnit ? ` (${yUnit})` : ""}`);
+
+        const legend = svg.append("g")
+            .attr("class", "legend chart-owned-legend")
+            .attr("data-reference-relationship", "independent-centered-above-plot")
+            .attr("transform", `translate(${panel.x + panel.w * 0.39},${panel.y + 26})`);
+        legendGroups.forEach((group, index) => {
+            const lx = index * panel.w * 0.19;
+            legend.append("rect")
+                .attr("x", lx)
+                .attr("y", -7)
+                .attr("width", 17)
+                .attr("height", 17)
+                .attr("rx", 3)
+                .attr("fill", `url(#vg13-hatch-${slug(group)})`)
+                .attr("stroke", groupColor.get(group))
+                .attr("stroke-width", 1.3);
+            legend.append("text")
+                .attr("x", lx + 27)
+                .attr("y", 2)
+                .attr("dominant-baseline", "middle")
+                .style("font-family", fontFamily)
+                .style("font-size", `${clamp(height * 0.020, 10, 13)}px`)
+                .style("font-weight", 800)
+                .style("fill", group === highGroup ? orangeDark : greenDark)
+                .text(String(group));
+        });
+
+        const plot = {
+            x: panel.x + panel.w * 0.065,
+            y: panel.y + panel.h * 0.11,
+            w: panel.w * 0.89,
+            h: panel.h * 0.815
+        };
+        const xScale2 = d3.scaleBand()
+            .domain(xValues)
+            .range([plot.x, plot.x + plot.w])
+            .padding(0.10);
+        const dataMax = d3.max(useData, d => +d[yField]) || 100;
+        const smallAxis = smallValueAxis(dataMax);
+        const yMax = smallAxis ? smallAxis.max : d3.scaleLinear().domain([0, dataMax * 1.14]).nice(5).domain()[1];
+        const yScale2 = d3.scaleLinear()
+            .domain([0, yMax])
+            .range([plot.y + plot.h, plot.y]);
+        const yTicks = smallAxis
+            ? d3.range(0, yMax + smallAxis.step / 2, smallAxis.step)
+            : yScale2.ticks(5);
+        yTicks.forEach(tick => {
+            const y = yScale2(tick);
+            svg.append("line")
+                .attr("class", "gridline")
+                .attr("x1", plot.x)
+                .attr("x2", plot.x + plot.w)
+                .attr("y1", y)
+                .attr("y2", y)
+                .attr("stroke", "#d9d9bf")
+                .attr("stroke-dasharray", "3 4")
+                .attr("stroke-width", 0.8);
+            svg.append("text")
+                .attr("class", "y-tick")
+                .attr("x", plot.x - 9)
+                .attr("y", y + 4)
+                .attr("text-anchor", "end")
+                .style("font-family", fontFamily)
+                .style("font-size", `${clamp(height * 0.017, 8, 11)}px`)
+                .style("fill", textColor)
+                .text(formatValue(tick));
+        });
+        svg.append("line")
+            .attr("class", "y-axis-line")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x)
+            .attr("y1", plot.y)
+            .attr("y2", plot.y + plot.h)
+            .attr("stroke", "#2f7141")
+            .attr("stroke-width", 1.1);
+        svg.append("line")
+            .attr("class", "baseline")
+            .attr("x1", plot.x)
+            .attr("x2", plot.x + plot.w)
+            .attr("y1", plot.y + plot.h)
+            .attr("y2", plot.y + plot.h)
+            .attr("stroke", "#2f7141")
+            .attr("stroke-width", 1.1);
+
+        const band = xScale2.bandwidth();
+        const barW = clamp(band * 0.26, 4, 14);
+        const gap = clamp(band * 0.08, 2, 5);
+        const labelSize = clamp(height * 0.018, 8, 12);
+        xValues.forEach(xValue => {
+            const rows = useData.filter(d => d[xField] === xValue);
+            const center = xScale2(xValue) + band / 2;
+            const highRow = rows.find(d => d[groupField] === highGroup);
+            const lowRow = rows.find(d => d[groupField] === lowGroup);
+            const positions = [
+                { group: highGroup, row: highRow, x: center - barW - gap / 2, color: groupColor.get(highGroup), labelColor: orangeDark },
+                { group: lowGroup, row: lowRow, x: center + gap / 2, color: groupColor.get(lowGroup), labelColor: greenDark }
+            ];
+            positions.forEach(item => {
+                if (!item.row) return;
+                const value = +item.row[yField] || 0;
+                const y = yScale2(value);
+                const h = plot.y + plot.h - y;
+                svg.append("path")
+                    .attr("class", `bar grouped-bar ${item.group === highGroup ? "high-bar" : "low-bar"}`)
+                    .attr("data-group", item.group)
+                    .attr("data-x", xValue)
+                    .attr("data-y", value)
+                    .attr("data-mark-endcap", "flat-baseline-slightly-rounded-top")
+                    .attr("data-baseline-edge", "flat-square")
+                    .attr("data-value-edge", "horizontal-flat-with-minor-top-corner-radius")
+                    .attr("data-stacked-join", "not-applicable-grouped-bars-separated")
+                    .attr("d", roundedTopBarPath(item.x, y, barW, Math.max(0, h), Math.min(2, barW * 0.14)))
+                    .attr("fill", `url(#vg13-hatch-${slug(item.group)})`)
+                    .attr("stroke", darken(item.color, 0.25, item.color))
+                    .attr("stroke-width", 0.45);
+                svg.append("text")
+                    .attr("class", "bar-value-label")
+                    .attr("x", item.x + barW / 2)
+                    .attr("y", Math.max(plot.y + 10, y - 5))
+                    .attr("text-anchor", "middle")
+                    .style("font-family", fontFamily)
+                    .style("font-size", `${labelSize}px`)
+                    .style("font-weight", 800)
+                    .style("fill", item.labelColor)
+                    .text(formatValue(value));
+            });
+            const xText = String(xValue);
+            const compactTimeLabel = /^\d{4}(-\d{2})?$/.test(xText) || timeKey(xText) !== null;
+            const tileMaxW = compactTimeLabel ? 44 : Math.min(78, band * 0.94);
+            const tileW = clamp(band * 0.92, 22, tileMaxW);
+            const tileH = clamp(height * 0.044, 18, 26);
+            const tileX = center - tileW / 2;
+            const tileY = panel.y + panel.h - tileH - 7;
+            svg.append("rect")
+                .attr("class", "x-label-tile")
+                .attr("data-reference-relationship", "centered-on-band-contained-label")
+                .attr("data-full-label", xText)
+                .attr("x", tileX)
+                .attr("y", tileY)
+                .attr("width", tileW)
+                .attr("height", tileH)
+                .attr("rx", 3)
+                .attr("ry", 3)
+                .attr("fill", greenDark)
+                .attr("stroke", "#0a4a2f")
+                .attr("stroke-width", 0.7);
+            const xSize = fitFont(xText, tileW - 6, clamp(height * 0.020, 9, 13), 6, 800, fontFamily);
+            const shortLabel = xText.length <= 8;
+            const fittedXText = (compactTimeLabel || shortLabel) ? xText : ellipsizeText(xText, tileW - 7, xSize, 800, fontFamily);
+            const xLabel = svg.append("text")
+                .attr("class", "x-label")
+                .attr("data-full-label", xText)
+                .attr("x", center)
+                .attr("y", tileY + tileH / 2 + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", fontFamily)
+                .style("font-size", `${xSize}px`)
+                .style("font-weight", 800)
+                .style("fill", "#ffffff")
+                .text(fittedXText);
+            xLabel.append("title").text(xText);
+        });
+
+        return svg.node();
+    }
+
+
+    // ---------- 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. 创建视觉效果 (Patterns for Sketch Style) ----------
+    const defs = svg.append("defs");
+
+    // --- Sketch Pattern for Left Bars ---
+    const patternLeft = defs.append("pattern")
+        .attr("id", "pattern-sketch-left")
+        .attr("width", 8) // Pattern tile size
+        .attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(45)"); // Rotate lines
+
+    // Background color for the pattern tile
+    patternLeft.append("rect")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("fill", leftGroupColor);
+
+    // Sketch lines (white in example image)
+    patternLeft.append("path")
+        .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0") // Horizontal lines, rotation makes them diagonal
+        .attr("stroke", "#FFFFFF") // White lines like example
+        .attr("stroke-width", 0.8); // Thinner lines
+
+    // --- Sketch Pattern for Right Bars ---
+    const patternRight = defs.append("pattern")
+        .attr("id", "pattern-sketch-right")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("patternUnits", "userSpaceOnUse")
+        .attr("patternTransform", "rotate(45)");
+
+    patternRight.append("rect")
+        .attr("width", 8)
+        .attr("height", 8)
+        .attr("fill", rightGroupColor);
+
+    patternRight.append("path")
+        .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0")
+        .attr("stroke", "#FFFFFF")
+        .attr("stroke-width", 0.8);
+
+    // *** 添加: 新的 Sketch Pattern for Label Backgrounds ***
+    const patternLabelSketch = defs.append("pattern")
+         .attr("id", "pattern-label-sketch") // 新 ID
+         .attr("width", 8) // 可以与 bar pattern 保持一致或调整
+         .attr("height", 8)
+         .attr("patternUnits", "userSpaceOnUse")
+         .attr("patternTransform", "rotate(45)"); // 保持斜线
+
+     // 添加白色背景矩形
+     patternLabelSketch.append("rect")
+         .attr("width", 8)
+         .attr("height", 8)
+         .attr("fill", "#FFFFFF"); // 白色背景
+
+     // 添加灰色斜线
+     patternLabelSketch.append("path")
+         .attr("d", "M -1,2 l 10,0 M -1,5 l 10,0 M -1,8 l 10,0") // 与 bar pattern 线条一致
+         .attr("stroke", "#CCCCCC") // *** 修改: 灰色线条 ***
+         .attr("stroke-width", 0.6); // 可以调整线条粗细
+
+    // Shadow Filter (if enabled)
+    if (variables.has_shadow) {
+        // ... (shadow filter code remains the same as original)
+         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. 创建比例尺 ----------
+    const xScale = d3.scaleBand()
+        .domain(xValues)
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    const groupScale = d3.scaleBand()
+        .domain([0, 1]) // Left (0) and Right (1) bars within a group
+        .range([0, xScale.bandwidth()])
+        .padding(variables.has_spacing ? 0.2 : 0.1); // Adjust spacing within group
+
+    const dataMax = d3.max(useData, d => +d[yField]) || 100;
+    const yScale = d3.scaleLinear()
+        .domain([0, dataMax * 1.1]) // Add some top padding for labels
+        .range([innerHeight, 0]);
+
+    const barWidth = groupScale.bandwidth();
+
+    // ---------- 9. 文本格式化 ----------
+    // 添加数值格式化函数
+
+    // 完整格式化函数（包含单位）
+    const formatValueWithUnit = (value) => `${chartUtils.format.autoText(value)}${yUnit}`;
+
+    // 计算动态文本大小的函数
+    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)));
+    };
+    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);
+        });
+    }
+
+    // ---------- 10. 创建X坐标轴标签 (新逻辑) ----------
+    const xAxisGroup = chart.append("g")
+        .attr("class", "x-axis")
+        .attr("transform", `translate(0, ${innerHeight})`);
+
+    // 计算标签最大宽度和统一字体大小 (同 chart_12)
+    const labelMaxWidth = xScale.bandwidth() * 1.1; // 允许稍微宽一点以便背景有空间
+    const longestLabel = xValues.reduce((a, b) => a.toString().length > b.toString().length ? a.toString() : b.toString(), "");
+    const baseFontSize = parseInt(typography.label.font_size);
+    const uniformFontSize = calculateFontSize(longestLabel, labelMaxWidth * 0.9, baseFontSize); // 计算字体时用稍小的宽度
+
+    // 定义手绘背景的内边距
+    const sketchPadding = 5;
+
+    // 绘制X轴标签组
+    xAxisGroup.selectAll(".x-label-group")
+        .data(xValues)
+        .enter()
+        .append("g")
+        .attr("class", "x-label-group")
+        .attr("transform", d => `translate(${xScale(d) + xScale.bandwidth() / 2}, 25)`) // Group 定位不变
+        .each(function(d) {
+            const group = d3.select(this);
+            const textContent = d.toString();
+
+            // 1. 创建文本元素
+            const text = group.append("text")
+                .attr("class", "x-label")
+                .attr("x", 0) // 相对于 group 居中
+                .attr("y", 0) // 相对于 group 垂直基线 (会被 wrapText 调整)
+                .attr("text-anchor", "middle")
+                .style("font-family", "'Comic Sans MS', cursive")
+                .style("font-size", `${uniformFontSize}px`) // 应用统一字体
+                .style("font-weight", typography.label.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                .text(textContent);
+
+            // 2. 检查宽度并应用换行 (同 chart_12)
+            // 注意: wrapText 需要在 chart_13 中可用
+            const textWidth = chartUtils.text.measure(null, textContent, {
+                fontFamily: "'Comic Sans MS', cursive",
+                fontSize: uniformFontSize,
+                fontWeight: typography.label.font_weight
+            }).width;
+            if (textWidth > labelMaxWidth) {
+                wrapText(text, textContent, labelMaxWidth, 1.1); // 1.1 是行高倍数
+            }
+
+            // 3. 根据最终文本行计算背景边界框
+            const renderedLines = text.selectAll("tspan").nodes().map(node => d3.select(node).text());
+            const labelLines = renderedLines.length ? renderedLines : [text.text()];
+            const measureOptions = {
+                fontFamily: "'Comic Sans MS', cursive",
+                fontSize: uniformFontSize,
+                fontWeight: typography.label.font_weight
+            };
+            const bboxWidth = Math.max(...labelLines.map(line => chartUtils.text.measure(null, line, measureOptions).width), 0);
+            const bboxHeight = labelLines.length > 1
+                ? uniformFontSize + (labelLines.length - 1) * uniformFontSize * 1.1
+                : chartUtils.text.measure(null, labelLines[0], measureOptions).height;
+            const bbox = {
+                width: bboxWidth,
+                height: bboxHeight,
+                x: -bboxWidth / 2,
+                y: labelLines.length > 1 ? -bboxHeight / 2 : -bboxHeight * 0.8
+            };
+
+            // 4. 计算手绘背景尺寸和位置
+            const bgWidth = bbox.width + 2 * sketchPadding;
+            const bgHeight = bbox.height + 1.5 * sketchPadding;
+            // bgX/bgY 相对于 group 的 (0,0) 点计算
+            const bgX = bbox.x - sketchPadding;
+            const bgY = bbox.y - sketchPadding * 0.75; // 调整 Y 使背景居中
+
+            // 5. 插入手绘背景矩形 (在文本之前)
+            group.insert("rect", "text")
+                .attr("class", "label-background")
+                .attr("x", bgX)
+                .attr("y", bgY)
+                .attr("width", bgWidth)
+                .attr("height", bgHeight)
+                .attr("fill", "url(#pattern-label-sketch)")
+                .attr("stroke", "#AAAAAA")
+                .attr("stroke-width", 0.5);
+        });
+
+    // ---------- 11. 绘制图例 ----------
+    const legendItems = legendData.map(item => ({
+        label: item.key,
+        color: item.pattern || item.color,
+    }));
+    chartUtils.legend.centered(svg, legendItems, {}, width / 2, 30, {
+        markerShape: "rect",
+        markerSize: 15,
+        labelGap: 5,
+        itemGap: 20,
+        fontSize: 12,
+        fontFamily: typography.label.font_family || "'Comic Sans MS', cursive",
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+
+    // ---------- 12. 绘制条形图和数值标签 (带手绘背景) ----------
+    xValues.forEach(xValue => {
+        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 baseFontSizeValue = parseInt(typography.label.font_size); // 数值标签基础大小
+        const valueLabelMaxWidth = barWidth * 1.1; // 数值标签最大宽度
+
+        // --- Left Bar ---
+        if (leftBarData) {
+            const leftValue = +leftBarData[yField];
+            if (isNaN(leftValue)) return; // Skip if value is not a number
+
+            const leftBarHeight = innerHeight - yScale(leftValue);
+            const leftBarY = yScale(leftValue);
+            const leftBarX = xScale(xValue) + groupScale(0); // Use groupScale for position
+
+            // Draw Bar
+            chart.append("rect")
+                .attr("class", "bar left-bar")
+                .attr("x", leftBarX)
+                .attr("y", leftBarY)
+                .attr("width", barWidth)
+                .attr("height", Math.max(0, leftBarHeight)) // Ensure height is not negative
+                .attr("fill", "url(#pattern-sketch-left)") // Use sketch pattern
+                .attr("stroke", variables.has_stroke ? "#555" : "none")
+                .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+
+            // --- 修改: 绘制带背景的数值标签 ---
+            if (leftBarHeight > 5) {
+                const labelX = leftBarX + barWidth / 2;
+                const labelY = leftBarY - 8;
+                const textContent = formatValueWithUnit(leftValue);
+
+                // 使用临时 group 来绘制标签和背景
+                const labelGroup = chart.append("g")
+                    .attr("class", "value-label-group left-value-label");
+
+                // 复用字体大小调整逻辑 (可以封装成函数)
+                let currentFontSize = baseFontSizeValue;
+                let bbox = chartUtils.text.measure(labelGroup, textContent, {
+                    fontFamily: "'Comic Sans MS', cursive",
+                    fontSize: baseFontSizeValue,
+                    fontWeight: "bold"
+                });
+                if (bbox.width > valueLabelMaxWidth - 2 * sketchPadding) {
+                    currentFontSize = Math.max(8, baseFontSizeValue * ((valueLabelMaxWidth - 2 * sketchPadding) / bbox.width));
+                }
+
+                // 获取最终尺寸
+                bbox = chartUtils.text.measure(labelGroup, textContent, {
+                    fontFamily: "'Comic Sans MS', cursive",
+                    fontSize: currentFontSize,
+                    fontWeight: "bold"
+                });
+
+                const bgWidth = bbox.width + 2 * sketchPadding;
+                const bgHeight = bbox.height + 1.5 * sketchPadding;
+                const bgX = labelX - bgWidth / 2;
+                const bgY = labelY - bgHeight + sketchPadding / 2;
+
+                labelGroup.append("rect")
+                    .attr("x", bgX)
+                    .attr("y", bgY)
+                    .attr("width", bgWidth)
+                    .attr("height", bgHeight)
+                    .attr("fill", "url(#pattern-label-sketch)")
+                    .attr("stroke", "#AAAAAA")
+                    .attr("stroke-width", 0.5);
+
+                labelGroup.append("text")
+                    .attr("class", "bar-label")
+                    .attr("x", labelX)
+                    .attr("y", labelY)
+                    .attr("text-anchor", "middle")
+                    .style("font-family", "'Comic Sans MS', cursive")
+                    .style("font-size", `${currentFontSize}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .attr("dominant-baseline", "alphabetic")
+                    .text(textContent);
+            }
+        }
+
+        // --- Right Bar --- (类似地修改数值标签)
+        if (rightBarData) {
+            const rightValue = +rightBarData[yField];
+             if (isNaN(rightValue)) return; // Skip if value is not a number
+
+            const rightBarHeight = innerHeight - yScale(rightValue);
+            const rightBarY = yScale(rightValue);
+            const rightBarX = xScale(xValue) + groupScale(1); // Use groupScale for position
+
+            // Draw Bar
+            chart.append("rect")
+                .attr("class", "bar right-bar")
+                .attr("x", rightBarX)
+                .attr("y", rightBarY)
+                .attr("width", barWidth)
+                .attr("height", Math.max(0, rightBarHeight)) // Ensure height is not negative
+                .attr("fill", "url(#pattern-sketch-right)") // Use sketch pattern
+                .attr("stroke", variables.has_stroke ? "#555" : "none")
+                .attr("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+
+            // --- 修改: 绘制带背景的数值标签 ---
+             if (rightBarHeight > 5) {
+                 const labelX = rightBarX + barWidth / 2;
+                 const labelY = rightBarY - 8;
+                 const textContent = formatValueWithUnit(rightValue);
+
+                 const labelGroup = chart.append("g")
+                     .attr("class", "value-label-group right-value-label");
+
+                // 复用字体大小调整逻辑
+                let currentFontSize = baseFontSizeValue;
+                let bbox = chartUtils.text.measure(labelGroup, textContent, {
+                    fontFamily: "'Comic Sans MS', cursive",
+                    fontSize: baseFontSizeValue,
+                    fontWeight: "bold"
+                });
+                if (bbox.width > valueLabelMaxWidth - 2 * sketchPadding) {
+                    currentFontSize = Math.max(8, baseFontSizeValue * ((valueLabelMaxWidth - 2 * sketchPadding) / bbox.width));
+                }
+
+                bbox = chartUtils.text.measure(labelGroup, textContent, {
+                    fontFamily: "'Comic Sans MS', cursive",
+                    fontSize: currentFontSize,
+                    fontWeight: "bold"
+                });
+
+                const bgWidth = bbox.width + 2 * sketchPadding;
+                const bgHeight = bbox.height + 1.5 * sketchPadding;
+                const bgX = labelX - bgWidth / 2;
+                const bgY = labelY - bgHeight + sketchPadding / 2;
+
+                labelGroup.append("rect")
+                    .attr("x", bgX)
+                    .attr("y", bgY)
+                    .attr("width", bgWidth)
+                    .attr("height", bgHeight)
+                    .attr("fill", "url(#pattern-label-sketch)")
+                    .attr("stroke", "#AAAAAA")
+                    .attr("stroke-width", 0.5);
+
+                labelGroup.append("text")
+                    .attr("class", "bar-label")
+                    .attr("x", labelX)
+                    .attr("y", labelY)
+                    .attr("text-anchor", "middle")
+                    .style("font-family", "'Comic Sans MS', cursive")
+                    .style("font-size", `${currentFontSize}px`)
+                    .style("font-weight", "bold")
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .attr("dominant-baseline", "alphabetic")
+                    .text(textContent);
+             }
+        }
+    });
+
+    // ---------- 14. 返回SVG节点 ----------
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_pictorial_percentage_bar_chart_01.js

@@ -0,0 +1,444 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pictorial Percentage Bar Chart",
+    "chart_name": "vertical_pictorial_percentage_bar_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 10], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 实现花瓶形状的柱状图 - 使用D3.js
+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: "28px", font_weight: 700 },
+        label: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        description: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: 400 }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#000000",
+        other: { primary: "#4682B4", secondary: "#FF7F50" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };  // 图像(国旗等)
+    const dataColumns = chartUtils.schema.columns(jsonData);            // 使用data_columns
+
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 提取字段名称 ----------
+    let xField, yField;
+
+    // 安全地提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; // 默认为百分比
+
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    // 添加数值格式化函数
+    // ---------- 3. 数据处理 ----------
+    // 按照y值降序排序数据
+    const sortedData = [...chartData].sort((a, b) => b[yField] - a[yField]);
+
+    // ---------- 4. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+
+    // 边距: 上, 右, 下, 左
+    const margin = {
+        top: 120,         // 减少顶部空间
+        right: 30,
+        bottom: 80,      // 国旗和标签的空间
+        left: 30
+    };
+
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 5. 创建SVG容器 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .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 chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // ---------- 6. 创建比例尺 ----------
+    // X轴比例尺（瓶子之间的间隔）
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d[xField]))
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    // Y轴比例尺（瓶子的高度）
+    const yMax = d3.max(sortedData, d => +d[yField]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.1]) // 添加10%的空间
+        .range([innerHeight, 0]);
+
+    // ---------- 7. 创建瓶子和蒙版 ----------
+    // 定义瓶子的宽度和高度 (不修改这部分)
+    const bottleWidth = xScale.bandwidth();
+    const bottleHeight = Math.max(bottleWidth * 3, innerHeight * 0.5);
+
+    // 获取瓶子的主要颜色
+    const bottleColor = colorResolver.other("primary", { fallback: "#4CAF50" }).value;
+
+    // 定义国旗和文本的空间
+    const flagTextHeight = 50;
+
+    // 计算瓶子底部应在的位置 - 让瓶子底部接近国旗
+    const bottleBottomY = innerHeight - 10; // 瓶子底部位置，紧贴国旗上方
+    const bottleTopY = bottleBottomY - bottleHeight; // 瓶子顶部位置
+
+    // 创建一个数组来存储所有的值标签元素引用
+    const valueLabels = [];
+
+    const bottleImageSVG = `<svg viewBox="0 0 200 500" xmlns="http://www.w3.org/2000/svg">
+  <path d="M60,280 L60,450 Q100,480 140,450 L140,280 Z" fill="#8BC34A"/>
+
+  <path d="M60,230 L60,280 L140,280 L140,230 Z" fill="#FDD835"/>
+  <circle cx="100" cy="255" r="25" fill="#FDD835"/>
+
+  <path d="M75,50 Q100,40 125,50 L125,70 Q100,80 75,70 Z" fill="#555555"/>
+  <path d="M80,70 L60,230 L140,230 L120,70 Z" fill="#555555"/>
+
+  <path d="M80,70 Q100,60 120,70 L120,70 Q100,80 80,70 Z" fill="#555555"/>
+</svg>`;
+
+    // 辅助函数：将字符串转换为 base64
+    function svgToBase64(svg) {
+        // 移除所有换行符和多余的空格
+        const cleanSvg = svg.replace(/\s+/g, ' ').trim();
+        // 使用 encodeURIComponent 处理 Unicode 字符
+        const encoded = encodeURIComponent(cleanSvg);
+        return 'data:image/svg+xml;base64,' + btoa(unescape(encoded));
+    }
+
+    // 将 SVG 转换为 base64
+    const bottleImageBase64 = svgToBase64(bottleImageSVG);
+
+    // 从SVG的viewBox中获取实际比例
+    const svgViewBox = bottleImageSVG.match(/viewBox="([^"]+)"/)[1].split(' ').map(Number);
+    const svgWidth = svgViewBox[2];
+    const svgHeight = svgViewBox[3];
+    const svgAspectRatio = svgHeight / svgWidth;
+
+    // 计算基础间距（在 makeChart 函数开始处添加）
+    const baseBottleWidth = xScale.bandwidth();
+    const baseBottleHeight = baseBottleWidth * svgAspectRatio;
+    const spacingAfterBottle = baseBottleWidth * 0.1; // 瓶子和图标之间的间距
+    const spacingBetweenIconLabel = baseBottleWidth * 0.15; // 图标和标签之间的间距
+
+    // 开始添加瓶子图像和蒙版
+    chart.selectAll(".bottle-group")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "bottle-group")
+        .attr("transform", d => `translate(${xScale(d[xField])}, ${bottleTopY})`)
+        .each(function(d, i) {
+            const group = d3.select(this);
+            const bottleWidth = xScale.bandwidth();
+            // 根据SVG的实际比例计算瓶子高度
+            const bottleHeight = bottleWidth * svgAspectRatio;
+            // 判断是否为最大值
+            const isMaxValue = +d[yField] === yMax;
+            const bottlePercentage = isMaxValue ? 1 : Math.max(0, (+d[yField] / yMax));
+
+            // 定义裁剪路径
+            const clipId = `clip-${i}`;
+            group.append("clipPath")
+                .attr("id", clipId)
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", bottleHeight * (1 - bottlePercentage))
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight * bottlePercentage);
+
+            // 添加半透明的背景瓶子
+            group.append("image")
+                .attr("xlink:href", bottleImageBase64)
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .style("opacity", 0.15);
+
+            // 添加裁剪后的前景瓶子
+            group.append("image")
+                .attr("xlink:href", bottleImageBase64)
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("clip-path", `url(#${clipId})`);
+
+            // 计算标签方块的大小和位置
+            const squareSize = bottleWidth * 0.6;
+            const squareX = (bottleWidth - squareSize) / 2;
+            const squareY = bottleHeight * (2/3) - (squareSize / 2);
+
+            // 添加正方形背景
+            group.append("rect")
+                .attr("class", "value-bg")
+                .attr("x", squareX)
+                .attr("y", squareY)
+                .attr("width", squareSize)
+                .attr("height", squareSize)
+                .attr("fill", "#f5f5f5")
+                .attr("opacity", 0.8)
+                .attr("rx", 5)
+                .attr("ry", 5);
+
+            // 格式化值
+
+            const formattedValue = `${chartUtils.format.autoText(+d[yField])}${valueUnit}`;
+            // 我们将在下面计算实际字体大小，先使用基础大小创建文本元素
+            const baseValueFontSize = 16;
+
+            // 添加数值文本但先不设置字体大小
+            const valueText = group.append("text")
+                .attr("class", "value-label")
+                .attr("x", bottleWidth / 2)
+                .attr("y", squareY + (squareSize * 0.6)) // 先设置一个位置，稍后会调整
+                .attr("text-anchor", "middle")
+                .style("font-family", typography.label.font_family)
+                .style("font-weight", "bold")
+                .style("fill", "#333")
+                .style("font-size", `${baseValueFontSize}px`) // 先设置基础字体大小
+                .text(formattedValue);
+
+            // 将值标签添加到数组中，以便后续统一调整
+            valueLabels.push({
+                element: valueText,
+                value: formattedValue,
+                squareSize: squareSize
+            });
+        });
+
+        // ---------- 8. 添加国旗和国家名称 (修改后) ----------
+        const baseLabelFontSize = 14; // 基础字体大小
+        // 文本换行辅助函数 (添加 alignment 参数)
+        function wrapText(text, str, width, lineHeight = 1.1, alignment = 'middle') {
+            const words = str.split(/\s+/).reverse(); // 按空格分割单词
+            let word;
+            let line = [];
+            let lineNumber = 0;
+            const initialY = parseFloat(text.attr("y")); // 获取原始y坐标
+            const initialX = parseFloat(text.attr("x")); // 获取原始x坐标
+            const actualFontSize = parseFloat(text.style("font-size")); // 获取实际应用的字体大小
+
+            text.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: 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.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: text.style("font-family"),
+                        fontSize: parseFloat(text.style("font-size")),
+                        fontWeight: text.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;
+
+            // 根据对齐方式计算起始偏移
+            if (alignment === 'middle') {
+                // 垂直居中：向上移动半行*(总行数-1)
+                startDy = -( (totalLines - 1) * lineHeight / 2);
+            } else if (alignment === 'bottom') {
+                // 底部对齐：计算总高度，向上移动 总高度 - 单行高度(近似)
+                // 注意：em单位是相对于字体大小的，这里用 lineHeight * actualFontSize 近似计算像素高度
+                const totalHeightEm = totalLines * lineHeight;
+                startDy = -(totalHeightEm - lineHeight); // 将底部对齐到原始y
+            }
+            // 如果是 'top' 对齐，startDy 保持为 0，即第一行基线在原始y位置
+            // 其他对齐方式（如 'top'）可以保持 startDy 为 0
+
+            // 创建所有行的tspan元素
+            tspans.forEach((lineText, i) => {
+                text.append("tspan")
+                    .attr("x", initialX) // x坐标与父<text>相同
+                    .attr("dy", (i === 0 ? startDy : lineHeight) + "em") // 第一行应用起始偏移，后续行应用行高
+                    .text(lineText);
+            });
+        }
+        // 计算所有维度标签在基础字体大小下的宽度
+        const dimensionWidths = sortedData.map(d => chartUtils.text.measure(svg, d[xField], {
+            fontFamily: typography.label.font_family,
+            fontSize: baseLabelFontSize
+        }).width);
+
+        const maxAvailableWidth = xScale.bandwidth() * 1.2;
+
+        // 计算是否需要缩小字体以及缩放比例
+        const maxDimensionWidth = Math.max(...dimensionWidths);
+        const labelScaleFactor = maxDimensionWidth > maxAvailableWidth ? maxAvailableWidth / maxDimensionWidth : 1;
+
+        // 确定最终的统一字体大小（增大1.5倍）
+        const finalLabelFontSize = baseLabelFontSize * labelScaleFactor * 1.5;
+
+        // 开始添加国旗和标签组
+        chart.selectAll(".flag-label-group")
+            .data(sortedData)
+            .enter()
+            .append("g")
+            .attr("class", "flag-label-group")
+            // 根据实际瓶子高度调整位置
+            .attr("transform", d => `translate(${xScale(d[xField]) + baseBottleWidth / 2}, ${bottleTopY + baseBottleHeight + spacingAfterBottle})`)
+            .each(function(d, i) {
+                const group = d3.select(this);
+
+                // 计算图标尺寸
+                const iconWidth = baseBottleWidth;
+                const iconHeight = iconWidth * 0.75;
+
+                // 添加国旗（如果数据中提供了图片字段和对应的值）
+                if (images.field && images.field[d[xField]]) {
+                    group.append("image")
+                        .attr("xlink:href", images.field[d[xField]])
+                        .attr("x", -iconWidth / 2)
+                        .attr("y", 0)
+                        .attr("width", iconWidth)
+                        .attr("height", iconHeight)
+                        .attr("preserveAspectRatio", "xMidYMid meet");
+                }
+
+                // 添加国家名称文本
+                const label = group.append("text")
+                    .attr("class", "country-label")
+                    .attr("x", 0)
+                    .attr("y", iconHeight + spacingBetweenIconLabel)
+                    .attr("text-anchor", "middle")
+                    .style("font-family", typography.label.font_family)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .text(d[xField]);
+
+                // 如果需要换行，重新应用换行
+                const labelMaxWidth = baseBottleWidth * 1.05;
+                if (chartUtils.text.measure(chart, d[xField], {
+                    fontFamily: typography.label.font_family,
+                    fontSize: finalLabelFontSize
+                }).width > labelMaxWidth) {
+                    wrapText(label, d[xField].toString(), labelMaxWidth, 1.1, 'top');
+                }
+            });
+
+    // ---------- 9. 统一调整所有值标签的字体大小 ----------
+    // 创建临时文本元素来测量值标签文本宽度
+
+    const baseValueFontSize = 16;
+    // 计算所有值标签在基础字体大小下的实际宽度
+    const valueTextWidths = valueLabels.map(item => {
+        return chartUtils.text.measure(svg, item.value, {
+            fontFamily: typography.label.font_family,
+            fontSize: `${baseValueFontSize}px`,
+            fontWeight: "bold"
+        }).width;
+    });
+
+    // 计算每个标签所需的缩放比例（方形宽度 / 文本宽度）
+    const valueScaleFactors = valueLabels.map((item, i) => {
+        // 使用60%的方形宽度作为最大可用宽度
+        const maxWidth = item.squareSize * 1; // 留一些边距
+        return maxWidth / valueTextWidths[i];
+    });
+
+    // 取最小的缩放比例，确保所有值标签使用相同的字体大小
+    const minValueScaleFactor = Math.min(...valueScaleFactors, 1); // 不要放大，只缩小
+
+    // 计算最终的统一字体大小
+    const finalValueFontSize = Math.min(baseValueFontSize * minValueScaleFactor, baseValueFontSize);
+
+    // 应用统一的字体大小到所有值标签
+    valueLabels.forEach(item => {
+        item.element
+            .style("font-size", `${finalValueFontSize}px`);
+    });
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/bar_chart/vertical_pictorial_percentage_bar_chart_02.js

@@ -0,0 +1,448 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pictorial Percentage Bar Chart",
+    "chart_name": "vertical_pictorial_percentage_bar_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 10], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 实现花瓶形状的柱状图 - 使用D3.js
+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: "28px", font_weight: 700 },
+        label: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        description: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: 400 }
+    };
+    const colors = jsonData.colors_dark || {
+        text_color: "#000000",
+        other: { primary: "#4682B4", secondary: "#FF7F50" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };  // 图像(国旗等)
+    const dataColumns = chartUtils.schema.columns(jsonData);            // 使用data_columns
+
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 提取字段名称 ----------
+    let xField, yField;
+
+    // 安全地提取字段名称
+    const xChannel = chartUtils.schema.channel(jsonData, "x");
+    const yChannel = chartUtils.schema.channel(jsonData, "y");
+
+    xField = xChannel.key;
+    yField = yChannel.key;
+
+    // 获取字段单位（如果存在）
+    let dimensionUnit = "";
+    let valueUnit = ""; // 默认为百分比
+
+    if (chartUtils.schema.channel(jsonData, "x").unit !== "none") {
+        dimensionUnit = chartUtils.schema.channel(jsonData, "x").unit;
+    }
+
+    if (chartUtils.schema.channel(jsonData, "y").unit !== "none") {
+        valueUnit = chartUtils.schema.channel(jsonData, "y").unit;
+    }
+    // 添加数值格式化函数
+    // ---------- 3. 数据处理 ----------
+    // 按照y值降序排序数据
+    const sortedData = [...chartData].sort((a, b) => b[yField] - a[yField]);
+
+    // ---------- 4. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+
+    // 边距: 上, 右, 下, 左
+    const margin = {
+        top: 120,         // 减少顶部空间
+        right: 30,
+        bottom: 80,      // 国旗和标签的空间
+        left: 30
+    };
+
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    // ---------- 5. 创建SVG容器 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .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 chart = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    // ---------- 6. 创建比例尺 ----------
+    // X轴比例尺（瓶子之间的间隔）
+    const xScale = d3.scaleBand()
+        .domain(sortedData.map(d => d[xField]))
+        .range([0, innerWidth])
+        .padding(0.2);
+
+    // Y轴比例尺（瓶子的高度）
+    const yMax = d3.max(sortedData, d => +d[yField]);
+    const yScale = d3.scaleLinear()
+        .domain([0, yMax * 1.1]) // 添加10%的空间
+        .range([innerHeight, 0]);
+
+    // ---------- 7. 创建瓶子和蒙版 ----------
+    // 定义瓶子的宽度和高度 (不修改这部分)
+    const bottleWidth = xScale.bandwidth();
+    const bottleHeight = Math.max(bottleWidth * 3, innerHeight * 0.5);
+
+    // 获取瓶子的主要颜色
+    const bottleColor = colorResolver.other("primary", { fallback: "#4CAF50" }).value;
+
+    // 定义国旗和文本的空间
+    const flagTextHeight = 50;
+
+    // 计算瓶子底部应在的位置 - 让瓶子底部接近国旗
+    const bottleBottomY = innerHeight - 10; // 瓶子底部位置，紧贴国旗上方
+    const bottleTopY = bottleBottomY - bottleHeight; // 瓶子顶部位置
+
+    // 创建一个数组来存储所有的值标签元素引用
+    const valueLabels = [];
+    const bottleImageSVG = `<svg viewBox="0 0 200 500" xmlns="http://www.w3.org/2000/svg">
+  <!-- 瓶身主体 -->
+  <path d="M60,280 L60,450 Q100,480 140,450 L140,280 Z" fill="#2196F3" filter="url(#glow)"/>
+
+  <!-- 瓶颈过渡部分 -->
+  <path d="M60,230 L60,280 L140,280 L140,230 Z" fill="#64B5F6"/>
+  <circle cx="100" cy="255" r="25" fill="#64B5F6"/>
+
+  <!-- 瓶口 -->
+  <path d="M75,50 Q100,40 125,50 L125,70 Q100,80 75,70 Z" fill="#90CAF9"/>
+  <path d="M80,70 L60,230 L140,230 L120,70 Z" fill="#90CAF9"/>
+  <path d="M80,70 Q100,60 120,70 L120,70 Q100,80 80,70 Z" fill="#90CAF9"/>
+
+  <!-- 添加光泽效果 -->
+  <defs>
+    <linearGradient id="shine" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/>
+      <stop offset="50%" style="stop-color:rgba(255,255,255,0.3)"/>
+      <stop offset="100%" style="stop-color:rgba(255,255,255,0.1)"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+
+  <!-- 添加光泽效果 -->
+  <path d="M70,280 L70,440 Q100,460 130,440 L130,280 Z" fill="url(#shine)" opacity="0.5"/>
+</svg>`;
+
+    // 辅助函数：将字符串转换为 base64
+    function svgToBase64(svg) {
+        // 移除所有换行符和多余的空格
+        const cleanSvg = svg.replace(/\s+/g, ' ').trim();
+        // 使用 encodeURIComponent 处理 Unicode 字符
+        const encoded = encodeURIComponent(cleanSvg);
+        return 'data:image/svg+xml;base64,' + btoa(unescape(encoded));
+    }
+
+    // 将 SVG 转换为 base64
+    const bottleImageBase64 = svgToBase64(bottleImageSVG);
+
+    // 从SVG的viewBox中获取实际比例
+    const svgViewBox = bottleImageSVG.match(/viewBox="([^"]+)"/)[1].split(' ').map(Number);
+    const svgWidth = svgViewBox[2];
+    const svgHeight = svgViewBox[3];
+    const svgAspectRatio = svgHeight / svgWidth;
+
+    // 计算基础间距（在 makeChart 函数开始处添加）
+    const baseBottleWidth = xScale.bandwidth();
+    const baseBottleHeight = baseBottleWidth * svgAspectRatio;
+    const spacingAfterBottle = baseBottleWidth * 0.1; // 瓶子和图标之间的间距
+    const spacingBetweenIconLabel = baseBottleWidth * 0.15; // 图标和标签之间的间距
+
+    // 开始添加瓶子图像和蒙版
+    chart.selectAll(".bottle-group")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "bottle-group")
+        .attr("transform", d => `translate(${xScale(d[xField])}, ${bottleTopY})`)
+        .each(function(d, i) {
+            const group = d3.select(this);
+            const bottleWidth = xScale.bandwidth();
+            // 根据SVG的实际比例计算瓶子高度
+            const bottleHeight = bottleWidth * svgAspectRatio;
+            // 判断是否为最大值
+            const isMaxValue = +d[yField] === yMax;
+            const bottlePercentage = isMaxValue ? 1 : Math.max(0, (+d[yField] / yMax));
+
+            // 定义裁剪路径
+            const clipId = `clip-${i}`;
+            group.append("clipPath")
+                .attr("id", clipId)
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", bottleHeight * (1 - bottlePercentage))
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight * bottlePercentage);
+
+            // 添加半透明的背景瓶子
+            group.append("image")
+                .attr("xlink:href", bottleImageBase64)
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .style("opacity", 0.15);
+
+            // 添加裁剪后的前景瓶子
+            group.append("image")
+                .attr("xlink:href", bottleImageBase64)
+                .attr("width", bottleWidth)
+                .attr("height", bottleHeight)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("clip-path", `url(#${clipId})`);
+
+            // 计算标签方块的大小和位置
+            const squareSize = bottleWidth * 0.6;
+            const squareX = (bottleWidth - squareSize) / 2;
+            const squareY = bottleHeight * (2/3) - (squareSize / 2);
+
+
+            // const formattedValue = `${chartUtils.format.autoText(+d[yField])}${valueUnit}`;
+            // // 我们将在下面计算实际字体大小，先使用基础大小创建文本元素
+            // const baseValueFontSize = 16;
+
+            // // 添加数值文本但先不设置字体大小
+            // const valueText = group.append("text")
+            //     .attr("class", "value-label")
+            //     .attr("x", bottleWidth / 2)
+            //     .attr("y", squareY + (squareSize * 0.6)) // 先设置一个位置，稍后会调整
+            //     .attr("text-anchor", "middle")
+            //     .style("font-family", typography.label.font_family)
+            //     .style("font-weight", "bold")
+            //     .style("fill", "#fff")
+            //     .style("font-size", `${baseValueFontSize}px`) // 先设置基础字体大小
+            //     .text(formattedValue);
+
+            // // 将值标签添加到数组中，以便后续统一调整
+            // valueLabels.push({
+            //     element: valueText,
+            //     value: formattedValue,
+            //     squareSize: squareSize
+            // });
+        });
+
+        // ---------- 8. 添加国旗和国家名称 (修改后) ----------
+        const baseLabelFontSize = 14; // 基础字体大小
+        // 文本换行辅助函数 (添加 alignment 参数)
+        function wrapText(text, str, width, lineHeight = 1.1, alignment = 'middle') {
+            const words = str.split(/\s+/).reverse(); // 按空格分割单词
+            let word;
+            let line = [];
+            let lineNumber = 0;
+            const initialY = parseFloat(text.attr("y")); // 获取原始y坐标
+            const initialX = parseFloat(text.attr("x")); // 获取原始x坐标
+            const actualFontSize = parseFloat(text.style("font-size")); // 获取实际应用的字体大小
+
+            text.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: 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.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: text.style("font-family"),
+                        fontSize: parseFloat(text.style("font-size")),
+                        fontWeight: text.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;
+
+            // 根据对齐方式计算起始偏移
+            if (alignment === 'middle') {
+                // 垂直居中：向上移动半行*(总行数-1)
+                startDy = -( (totalLines - 1) * lineHeight / 2);
+            } else if (alignment === 'bottom') {
+                // 底部对齐：计算总高度，向上移动 总高度 - 单行高度(近似)
+                // 注意：em单位是相对于字体大小的，这里用 lineHeight * actualFontSize 近似计算像素高度
+                const totalHeightEm = totalLines * lineHeight;
+                startDy = -(totalHeightEm - lineHeight); // 将底部对齐到原始y
+            }
+            // 如果是 'top' 对齐，startDy 保持为 0，即第一行基线在原始y位置
+            // 其他对齐方式（如 'top'）可以保持 startDy 为 0
+
+            // 创建所有行的tspan元素
+            tspans.forEach((lineText, i) => {
+                text.append("tspan")
+                    .attr("x", initialX) // x坐标与父<text>相同
+                    .attr("dy", (i === 0 ? startDy : lineHeight) + "em") // 第一行应用起始偏移，后续行应用行高
+                    .text(lineText);
+            });
+        }
+        // 计算所有维度标签在基础字体大小下的宽度
+        const dimensionWidths = sortedData.map(d => chartUtils.text.measure(svg, d[xField], {
+            fontFamily: typography.label.font_family,
+            fontSize: baseLabelFontSize
+        }).width);
+
+        const maxAvailableWidth = xScale.bandwidth() * 1.2;
+
+        // 计算是否需要缩小字体以及缩放比例
+        const maxDimensionWidth = Math.max(...dimensionWidths);
+        const labelScaleFactor = maxDimensionWidth > maxAvailableWidth ? maxAvailableWidth / maxDimensionWidth : 1;
+
+        // 确定最终的统一字体大小（增大1.5倍）
+        const finalLabelFontSize = baseLabelFontSize * labelScaleFactor * 1.5;
+
+        // 开始添加国旗和标签组
+        chart.selectAll(".flag-label-group")
+            .data(sortedData)
+            .enter()
+            .append("g")
+            .attr("class", "flag-label-group")
+            // 根据实际瓶子高度调整位置
+            .attr("transform", d => `translate(${xScale(d[xField]) + baseBottleWidth / 2}, ${bottleTopY + baseBottleHeight + spacingAfterBottle})`)
+            .each(function(d, i) {
+                const group = d3.select(this);
+
+                // 计算图标尺寸
+                const iconWidth = baseBottleWidth;
+                const iconHeight = iconWidth * 0.75;
+
+                // 添加国旗（如果数据中提供了图片字段和对应的值）
+                if (images.field && images.field[d[xField]]) {
+                    group.append("image")
+                        .attr("xlink:href", images.field[d[xField]])
+                        .attr("x", -iconWidth / 2)
+                        .attr("y", 0)
+                        .attr("width", iconWidth)
+                        .attr("height", iconHeight)
+                        .attr("preserveAspectRatio", "xMidYMid meet");
+                }
+
+                // 添加国家名称文本
+                const label = group.append("text")
+                    .attr("class", "country-label")
+                    .attr("x", 0)
+                    .attr("y", iconHeight + spacingBetweenIconLabel)
+                    .attr("text-anchor", "middle")
+                    .style("font-family", typography.label.font_family)
+                    .style("font-size", `${finalLabelFontSize}px`)
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .text(d[xField]);
+
+                // 如果需要换行，重新应用换行
+                const labelMaxWidth = baseBottleWidth * 1.05;
+                if (chartUtils.text.measure(chart, d[xField], {
+                    fontFamily: typography.label.font_family,
+                    fontSize: finalLabelFontSize
+                }).width > labelMaxWidth) {
+                    wrapText(label, d[xField].toString(), labelMaxWidth, 1.1, 'top');
+                }
+            });
+
+    // ---------- 9. 统一调整所有值标签的字体大小 ----------
+    // 创建临时文本元素来测量值标签文本宽度
+
+    const baseValueFontSize = 16;
+    // 计算所有值标签在基础字体大小下的实际宽度
+    const valueTextWidths = valueLabels.map(item => {
+        return chartUtils.text.measure(svg, item.value, {
+            fontFamily: typography.label.font_family,
+            fontSize: `${baseValueFontSize}px`,
+            fontWeight: "bold"
+        }).width;
+    });
+
+    // 计算每个标签所需的缩放比例（方形宽度 / 文本宽度）
+    const valueScaleFactors = valueLabels.map((item, i) => {
+        // 使用60%的方形宽度作为最大可用宽度
+        const maxWidth = item.squareSize * 1; // 留一些边距
+        return maxWidth / valueTextWidths[i];
+    });
+
+    // 取最小的缩放比例，确保所有值标签使用相同的字体大小
+    const minValueScaleFactor = Math.min(...valueScaleFactors, 1); // 不要放大，只缩小
+
+    // 计算最终的统一字体大小
+    const finalValueFontSize = Math.min(baseValueFontSize * minValueScaleFactor, baseValueFontSize);
+
+    // 应用统一的字体大小到所有值标签
+    valueLabels.forEach(item => {
+        item.element
+            .style("font-size", `${finalValueFontSize}px`);
+    });
+
+    // 返回SVG节点
+    return svg.node();
+}