Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_01.js

@@ -0,0 +1,429 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Diverging Bar Chart",
+    "chart_name": "diverging_bar_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], ["-inf", "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary","secondary"],
+    "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
+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 || 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;
+    
+    // ---------- 3. 提取字段名和单位 ----------
+    
+    const dimensionChannel = chartUtils.schema.channel(jsonData, "x", { fallbackKey: "dimension" });
+    const valueChannel = chartUtils.schema.channel(jsonData, "y", { fallbackKey: "value" });
+    const dimensionField = dimensionChannel.key;
+    const valueField = valueChannel.key;
+    const dimensionUnit = dimensionChannel.unit;
+    const valueUnit = valueChannel.unit;
+    
+    // ---------- 4. 数据处理 ----------
+    
+    // 修改：按数值升序排序数据（负值在上，正值在下）
+    chartData.sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 分离正负值
+    const positiveData = chartData.filter(d => +d[valueField] >= 0);
+    const negativeData = chartData.filter(d => +d[valueField] < 0);
+    
+    // 所有维度值按排序后的顺序
+    const sortedDimensions = chartData.map(d => d[dimensionField]);
+    
+    // ---------- 5. 测量文本尺寸 ----------
+    
+    // 测量所有维度标签的宽度
+    let maxDimensionLabelWidth = 0;
+    let maxValueLabelWidth = 0;
+    
+    // 测量每个维度标签的宽度
+    chartData.forEach(d => {
+        const dimension = d[dimensionField];
+        const textWidth = chartUtils.text.measure(null, dimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        maxDimensionLabelWidth = Math.max(maxDimensionLabelWidth, textWidth);
+    });
+
+    chartData.forEach(d => {
+        const value = d[valueField];
+        const formattedValue = value >= 0 ? 
+            `+${chartUtils.format.autoText(value)}${valueUnit}` : 
+            `${chartUtils.format.autoText(value)}${valueUnit}`;
+        const textWidth = chartUtils.text.measure(null, formattedValue, {
+            fontFamily: typography.annotation.font_family,
+            fontSize: typography.annotation.font_size,
+            fontWeight: typography.annotation.font_weight
+        }).width;
+        maxValueLabelWidth = Math.max(maxValueLabelWidth, textWidth);
+    });
+    
+    // ---------- 6. 计算内部绘图区域尺寸和布局 ----------
+    
+    // 初始化绘图区域边距
+    const labelPadding = 5; // 标签与条形之间的间距
+    const valuePadding = 5; // 数值与条形之间的间距
+    
+    // 计算需要的空间
+    const maxNegativeValue = d3.min(negativeData, d => +d[valueField]) || 0;
+    const maxPositiveValue = d3.max(positiveData, d => +d[valueField]) || 0;
+    
+    // 设置边距，考虑文本宽度
+    const margin = {
+        top: 60,      // 顶部留出标题空间
+        right: 0, 
+        bottom: 30,   // 底部边距
+        left: 0
+    };
+    
+    // 计算内部绘图区域尺寸
+    const innerWidth = width  - margin.left - margin.right; // 图表占总宽度的2/3
+    const innerHeight = height - margin.top - margin.bottom;
+    
+    // 计算条形的额外间距
+    const barPadding = variables.has_spacing ? 0.3 : 0.25;
+    
+    // Y轴比例尺（用于维度）
+    const yScale = d3.scaleBand()
+        .domain(sortedDimensions)
+        .range([0, innerHeight])
+        .padding(barPadding);
+        
+    // 计算最大绝对值
+    const maxAbsValue = Math.max(Math.abs(maxNegativeValue), Math.abs(maxPositiveValue)) * 1.05; // 添加5%边距
+    
+    // 计算负值栏最左侧位置（包括标签）
+    const negLabelSpace = maxDimensionLabelWidth - 30;
+    
+    // 计算正值栏最右侧位置（包括标签）
+    const posLabelSpace = maxDimensionLabelWidth - 30;
+    
+    // 创建从负值到正值的比例尺
+    const xScale = d3.scaleLinear()
+        .domain([-Math.abs(maxNegativeValue), Math.abs(maxPositiveValue)])
+        .range([negLabelSpace, innerWidth - posLabelSpace]);
+    
+    // 中心点位置
+    const center = xScale(0);
+    
+    // ---------- 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");
+    
+    // // 如果有背景颜色设置，添加背景
+    // if (colorResolver.background({ fallback: "#FFFFFF" }).value) {
+    //     svg.style("background-color", colorResolver.background({ fallback: "#FFFFFF" }).value);
+    // }
+    
+    // 添加defs用于视觉效果
+    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");
+    }
+    
+    // 添加渐变（如果启用）
+    if (variables.has_gradient) {
+        // 正值渐变
+        const positiveGradient = defs.append("linearGradient")
+            .attr("id", "positive-gradient")
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+        
+        const positiveColor = colorResolver.other("positive", { fallback: "#90EE90" }).value;
+        
+        positiveGradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(positiveColor, { mode: "brighter", amount: 0.5 }));
+        
+        positiveGradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(positiveColor, { mode: "darker", amount: 0.3 }));
+            
+        // 负值渐变
+        const negativeGradient = defs.append("linearGradient")
+            .attr("id", "negative-gradient")
+            .attr("x1", "100%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "0%");
+        
+        const negativeColor = colorResolver.other("negative", { fallback: "#C0C0C0" }).value;
+        
+        negativeGradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(negativeColor, { mode: "brighter", amount: 0.5 }));
+        
+        negativeGradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(negativeColor, { mode: "darker", amount: 0.3 }));
+    }
+    
+    // ---------- 8. 获取颜色 ----------
+    
+    // 获取正负值条形颜色的辅助函数
+    const getPositiveColor = () => {
+        if (colorResolver.other("primary").value) return colorResolver.other("primary").value;
+        return colorResolver.available(0, { fallback: "#4682B4" }).value; // 默认蓝色
+    };
+    
+    const getNegativeColor = () => {
+        if (colorResolver.other("secondary").value) return colorResolver.other("secondary").value;
+        return colorResolver.available(1, { fallback: "#5F9EA0" }).value; // 默认青绿色
+    };
+    
+    // 获取描边颜色的辅助函数
+    const getStrokeColor = () => {
+        const stroke = colorResolver.other("stroke_color", { fallback: "" }).value;
+        if (stroke) return stroke;
+        return colorResolver.available(0, { fallback: "#333333" }).value;
+    };
+    
+    // ---------- 9. 创建主图表组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 可选：添加中心线
+    g.append("line")
+        .attr("x1", center)
+        .attr("y1", 0)
+        .attr("x2", center)
+        .attr("y2", innerHeight)
+        .attr("stroke", "#000")  // 将 #ccc 改为 #000
+        .attr("stroke-width", 1)
+        .style("opacity", 0.5);
+    
+    // ---------- 10. 绘制条形和标签 ----------
+    
+    // 为每个维度绘制条形和标签
+    chartData.forEach(d => {
+        const dimension = d[dimensionField];
+        const value = d[valueField];
+        const barHeight = yScale.bandwidth();
+        
+        // 确定条形颜色：正值使用正值颜色，负值使用负值颜色
+        const barColor = value >= 0 ? 
+            (variables.has_gradient ? "url(#positive-gradient)" : getPositiveColor()) : 
+            (variables.has_gradient ? "url(#negative-gradient)" : getNegativeColor());
+        
+        // 格式化数值标签（添加加号或保留负号）
+        const formattedValue = value >= 0 ? 
+        `+${chartUtils.format.autoText(value)}${valueUnit}` : 
+        `${chartUtils.format.autoText(value)}${valueUnit}`;
+        
+        // 横条开始位置和宽度
+        let barX = center;
+        let barWidth = 0;
+        
+        if (value >= 0) {
+            // 正值条形向右延伸
+            barX = center;
+            barWidth = xScale(value) - center;
+        } else {
+            // 负值条形向左延伸
+            barWidth = center - xScale(value);
+            barX = center - barWidth;
+        }
+        
+        // 绘制条形
+        if (variables.has_rounded_corners) {
+            // 使用路径绘制具有选择性圆角的条形
+            const radius = 5; // 圆角半径
+            const y = yScale(dimension);
+            const height = barHeight;
+            // 当 |value| 很小、barWidth < radius 时，固定半径会让圆角控制点越过中心线，
+            // 把 bar 画到 0 线另一侧。这里把横向半径 clamp 到 barWidth，避免越线。
+            const rx = Math.min(radius, barWidth);
+            const ry = Math.min(radius, height / 2);
+            
+            if (value >= 0) {
+                // 正值条形：只在右侧有圆角
+                const path = [
+                    `M ${barX},${y}`, // 左上角起点
+                    `L ${barX + barWidth - rx},${y}`, // 到右上角圆角起点
+                    `Q ${barX + barWidth},${y} ${barX + barWidth},${y + ry}`, // 右上角圆角
+                    `L ${barX + barWidth},${y + height - ry}`, // 到右下角圆角起点
+                    `Q ${barX + barWidth},${y + height} ${barX + barWidth - rx},${y + height}`, // 右下角圆角
+                    `L ${barX},${y + height}`, // 到左下角
+                    `Z` // 闭合路径
+                ].join(' ');
+                
+                g.append("path")
+                    .attr("d", path)
+                    .attr("fill", barColor)
+                    .style("stroke", variables.has_stroke ? getStrokeColor() : "none")
+                    .style("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            } else {
+                // 负值条形：只在左侧有圆角
+                const path = [
+                    `M ${barX + rx},${y}`, // 左上角圆角起点
+                    `Q ${barX},${y} ${barX},${y + ry}`, // 左上角圆角
+                    `L ${barX},${y + height - ry}`, // 到左下角圆角起点
+                    `Q ${barX},${y + height} ${barX + rx},${y + height}`, // 左下角圆角
+                    `L ${barX + barWidth},${y + height}`, // 到右下角
+                    `L ${barX + barWidth},${y}`, // 到右上角
+                    `Z` // 闭合路径
+                ].join(' ');
+                
+                g.append("path")
+                    .attr("d", path)
+                    .attr("fill", barColor)
+                    .style("stroke", variables.has_stroke ? getStrokeColor() : "none")
+                    .style("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            }
+        } else {
+            // 没有圆角时使用普通矩形
+            g.append("rect")
+                .attr("x", barX)
+                .attr("y", yScale(dimension))
+                .attr("width", barWidth)
+                .attr("height", barHeight)
+                .attr("fill", barColor)
+                .style("stroke", variables.has_stroke ? getStrokeColor() : "none")
+                .style("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+        }
+        
+        // 绘制维度标签
+        if (value >= 0) {
+            // 正值：标签在条形左侧
+            g.append("text")
+                .attr("x", center - labelPadding)
+                .attr("y", yScale(dimension) + barHeight / 2)
+                .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: "#000000" }).value)
+                .text(dimension);
+        } else {
+            // 负值：标签在条形右侧
+            g.append("text")
+                .attr("x", center + labelPadding)
+                .attr("y", yScale(dimension) + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "start")
+                .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(dimension);
+        }
+        
+        // 绘制数值标签
+        if (value >= 0) {
+            // 正值：数值标签在条形右侧
+            g.append("text")
+                .attr("x", barX + barWidth + valuePadding)
+                .attr("y", yScale(dimension) + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "start")
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                .text(formattedValue);
+        } else {
+            // 负值：数值标签在条形左侧
+            g.append("text")
+                .attr("x", barX - valuePadding)
+                .attr("y", yScale(dimension) + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                .text(formattedValue);
+        }
+    });
+    
+    
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_02.js

@@ -0,0 +1,517 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Diverging Bar Chart",
+    "chart_name": "diverging_bar_plain_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], ["-inf", "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke", "spacing"],
+    "min_height": 500,
+    "min_width": 650,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const rawData = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    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 }
+    });
+
+    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 dimensionField = xColumn.name;
+    const valueField = yColumn.name;
+    const dimensionUnit = (xColumn.unit || "").trim();
+    const valueUnit = (yColumn.unit || "").trim();
+
+    const width = Number(variables.width) || 720;
+    const height = Number(variables.height) || 560;
+    const textColor = sourceColors.text_color || "#243042";
+    const canvasColor = "#f2f8fc";
+    const cardColor = "#ffffff";
+    const inkColor = "#16233d";
+    const mutedText = "#65748a";
+    const gridColor = "#d4e0ec";
+    const axisColor = "#33445f";
+    const positiveColor = "#38a856";
+    const positiveSoft = "#dff3df";
+    const negativeColor = "#ef3f4f";
+    const negativeSoft = "#fde1e4";
+    const labelFamily = (typography.label && typography.label.font_family) || "Arial, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || labelFamily;
+    const labelWeight = (typography.label && typography.label.font_weight) || 600;
+    const valueWeight = (typography.annotation && typography.annotation.font_weight) || 600;
+    const baseLabelSize = parseFloat(typography.label && typography.label.font_size) || 12;
+    const baseValueSize = parseFloat(typography.annotation && typography.annotation.font_size) || 11;
+
+    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("class", "diverging-bar-root");
+
+    const defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "diverging_bar_02_card_shadow")
+        .attr("x", "-8%")
+        .attr("y", "-10%")
+        .attr("width", "116%")
+        .attr("height", "124%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 2)
+        .attr("stdDeviation", 2.6)
+        .attr("flood-color", "#4d6078")
+        .attr("flood-opacity", 0.13);
+    const positiveGradient = defs.append("linearGradient")
+        .attr("id", "diverging_bar_02_positive_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    positiveGradient.append("stop").attr("offset", "0%").attr("stop-color", "#a7daa0");
+    positiveGradient.append("stop").attr("offset", "100%").attr("stop-color", positiveColor);
+    const negativeGradient = defs.append("linearGradient")
+        .attr("id", "diverging_bar_02_negative_gradient")
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%");
+    negativeGradient.append("stop").attr("offset", "0%").attr("stop-color", negativeColor);
+    negativeGradient.append("stop").attr("offset", "100%").attr("stop-color", "#f6a2aa");
+
+    function rgba(hex, opacity) {
+        const clean = String(hex || "").replace("#", "");
+        if (clean.length !== 6) return hex;
+        const r = parseInt(clean.slice(0, 2), 16);
+        const g = parseInt(clean.slice(2, 4), 16);
+        const b = parseInt(clean.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    function showMessage(message) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", labelFamily)
+            .style("font-size", "16px")
+            .text(message);
+        return svg.node();
+    }
+
+    if (!dimensionField || !valueField) {
+        return showMessage("Missing diverging bar fields");
+    }
+
+    function cleanLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function humanizeField(value) {
+        return cleanLabel(value).replace(/\b\w/g, letter => letter.toUpperCase());
+    }
+
+    function parseTemporal(value) {
+        if (value instanceof Date) return +value;
+        if (typeof value === "number") return +new Date(value, 0, 1);
+        const text = String(value ?? "").trim();
+        const yearRange = text.match(/^(-?\d{4})\s*[-–]\s*(-?\d{4})$/);
+        if (yearRange) return +new Date(Number(yearRange[1]), 0, 1);
+        const quarter = text.match(/^(\d{4})[-\s]?Q([1-4])$/i) || text.match(/^Q([1-4])\s+(\d{4})$/i);
+        if (quarter && quarter[1].length === 4) return +new Date(Number(quarter[1]), (Number(quarter[2]) - 1) * 3, 1);
+        if (quarter) return +new Date(Number(quarter[2]), (Number(quarter[1]) - 1) * 3, 1);
+        const yearMonth = text.match(/^(\d{4})[-/](\d{1,2})$/);
+        if (yearMonth) return +new Date(Number(yearMonth[1]), Number(yearMonth[2]) - 1, 1);
+        const fullDate = text.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})$/);
+        if (fullDate) return +new Date(Number(fullDate[1]), Number(fullDate[2]) - 1, Number(fullDate[3]));
+        if (/^-?\d{1,4}$/.test(text)) return +new Date(Number(text), 0, 1);
+        const parsed = +new Date(text);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+
+    function parseOrdinal(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        let match = text.match(/^(\d+(?:\.\d+)?)\s*(?:-|to|–)\s*\d+(?:\.\d+)?/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(\d+(?:\.\d+)?)\s*\+$/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(-?\d+(?:\.\d+)?)(?:st|nd|rd|th)?\b/);
+        if (match) return Number(match[1]);
+        const ranked = [
+            [/very\s+low|lowest|low|basic|entry/, 1],
+            [/medium|moderate|average|standard/, 2],
+            [/very\s+high|highest|high|advanced|premium/, 3]
+        ];
+        for (const [pattern, rank] of ranked) {
+            if (pattern.test(text)) return rank;
+        }
+        return null;
+    }
+
+    function formatNumber(value) {
+        const abs = Math.abs(value);
+        if (abs >= 1000000000) return d3.format(".3s")(value).replace("G", "B");
+        if (abs >= 1000000) return d3.format(".3s")(value);
+        if (abs >= 1000) return d3.format(".3s")(value);
+        if (abs >= 100) return d3.format(",.0f")(value);
+        if (abs >= 10) return d3.format(",.1f")(value).replace(/\.0$/, "");
+        return d3.format(",.2f")(value).replace(/\.?0+$/, "");
+    }
+
+    function formatLocalValue(value, includePlus = false) {
+        const sign = value > 0 && includePlus ? "+" : "";
+        const numberText = `${sign}${formatNumber(value)}`;
+        if (!valueUnit || valueUnit === "none") return numberText;
+        const prefixMatch = valueUnit.match(/^([$€£¥])(.+)?$/);
+        if (prefixMatch) {
+            const raw = formatNumber(Math.abs(value));
+            const signText = value < 0 ? "-" : (includePlus && value > 0 ? "+" : "");
+            return `${signText}${prefixMatch[1]}${raw}${prefixMatch[2] || ""}`;
+        }
+        if (valueUnit === "%") return `${numberText}%`;
+        return `${numberText} ${valueUnit}`;
+    }
+
+    function compactLabel(value, maxChars) {
+        const clean = cleanLabel(value);
+        if (clean.length <= maxChars) return clean;
+        const dashParts = clean.split(/\s+-\s+/).filter(Boolean);
+        if (dashParts.length > 1) {
+            const suffix = dashParts[dashParts.length - 1];
+            const prefixWords = dashParts.slice(0, -1).join(" ").split(/\s+/).filter(Boolean);
+            const candidate = `${prefixWords.slice(0, 2).join(" ")} - ${suffix}`;
+            if (candidate.length <= maxChars) return candidate;
+        }
+        const words = clean.split(/\s+/).filter(Boolean);
+        if (words.length > 1) {
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, maxChars - 1).trim()}...`;
+    }
+
+    const rows = rawData.map((row, index) => {
+        const value = Number(row[valueField]);
+        const label = row[dimensionField];
+        return {
+            ...row,
+            __index: index,
+            __label: cleanLabel(label),
+            __value: Number.isFinite(value) ? value : null,
+            __temporal: parseTemporal(label),
+            __ordinal: parseOrdinal(label)
+        };
+    }).filter(row => row.__label && row.__value !== null);
+
+    if (!rows.length) {
+        return showMessage("Not enough data for diverging bars");
+    }
+
+    const temporalX = xColumn.data_type === "temporal" || rows.every(row => row.__temporal !== null);
+    const ordinalX = !temporalX && rows.every(row => row.__ordinal !== null);
+    const sortedData = rows.slice().sort((a, b) => {
+        if (temporalX) return d3.ascending(a.__temporal, b.__temporal) || d3.ascending(a.__index, b.__index);
+        if (ordinalX) return d3.ascending(a.__ordinal, b.__ordinal) || d3.ascending(a.__index, b.__index);
+        return d3.ascending(a.__value, b.__value) || d3.ascending(a.__label, b.__label);
+    }).map((row, index) => ({ ...row, __id: index + 1, __rank: index }));
+    const orderMode = temporalX ? "temporal" : (ordinalX ? "ordinal" : "value_ascending");
+    const signSplitIndex = sortedData.findIndex(row => row.__value >= 0);
+    const hasGroupedSplit = signSplitIndex > 0
+        && signSplitIndex < sortedData.length
+        && sortedData.slice(0, signSplitIndex).every(row => row.__value < 0)
+        && sortedData.slice(signSplitIndex).every(row => row.__value >= 0);
+
+    const maxAbs = Math.max(1, d3.max(sortedData, row => Math.abs(row.__value)) || 1);
+    const minValue = d3.min(sortedData, row => row.__value) || 0;
+    const maxValue = d3.max(sortedData, row => row.__value) || 0;
+    const hasNegative = sortedData.some(row => row.__value < 0);
+    const hasPositive = sortedData.some(row => row.__value >= 0);
+    const xScale = d3.scaleLinear()
+        .domain([-maxAbs, maxAbs])
+        .nice(5)
+        .range([0, 1]);
+
+    const cardX = 18;
+    const cardY = 18;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = height - cardY * 2;
+    const headerHeight = 58;
+    const footerHeight = 48;
+    const margin = {
+        top: cardY + headerHeight,
+        right: cardX + 56,
+        bottom: height - (cardY + cardHeight - footerHeight),
+        left: cardX + 56
+    };
+    const chartWidth = Math.max(260, width - margin.left - margin.right);
+    const chartHeight = Math.max(210, height - margin.top - margin.bottom);
+    xScale.range([0, chartWidth]);
+    const sectionGap = hasGroupedSplit ? Math.min(34, Math.max(22, chartHeight * 0.065)) : 0;
+    const yScale = d3.scaleBand()
+        .domain(sortedData.map(row => row.__id))
+        .range([0, chartHeight - sectionGap])
+        .padding(sortedData.length > 14 ? 0.18 : 0.26);
+    const zeroX = xScale(0);
+    const rowHeight = yScale.bandwidth();
+    const labelFontSize = Math.max(8.5, Math.min(baseLabelSize, rowHeight * 0.44));
+    const valueFontSize = Math.max(8, Math.min(baseValueSize, rowHeight * 0.42));
+    const labelMaxChars = Math.max(8, Math.min(16, Math.floor(chartWidth * 0.18 / (labelFontSize * 0.55))));
+    function rowY(row) {
+        const extra = hasGroupedSplit && row.__rank >= signSplitIndex ? sectionGap : 0;
+        return yScale(row.__id) + extra;
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    svg.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", cardX)
+        .attr("y", cardY)
+        .attr("width", cardWidth)
+        .attr("height", cardHeight)
+        .attr("rx", 10)
+        .attr("ry", 10)
+        .attr("fill", cardColor)
+        .attr("stroke", "#d6e2f0")
+        .attr("stroke-width", 1.1)
+        .attr("filter", "url(#diverging_bar_02_card_shadow)");
+
+    const plot = svg.append("g")
+        .attr("class", "diverging-bar-chart")
+        .attr("data-tag", "chart")
+        .attr("data-count", sortedData.length)
+        .attr("data-order-mode", orderMode)
+        .attr("data-min-value", minValue)
+        .attr("data-max-value", maxValue)
+        .attr("data-max-abs", maxAbs)
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+
+    const ticks = Array.from(new Set(xScale.ticks(5).map(tick => Number(tick.toPrecision(10)))));
+    ticks.forEach(tick => {
+        const x = xScale(tick);
+        plot.append("line")
+            .attr("class", "gridline")
+            .attr("data-value", tick)
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", 0)
+            .attr("y2", chartHeight)
+            .attr("stroke", tick === 0 ? axisColor : gridColor)
+            .attr("stroke-width", tick === 0 ? 1.35 : 1)
+            .attr("stroke-dasharray", tick === 0 ? "none" : "3,5")
+            .attr("opacity", tick === 0 ? 0.78 : 0.92);
+        plot.append("text")
+            .attr("class", "axis-tick")
+            .attr("data-value", tick)
+            .attr("x", x)
+            .attr("y", chartHeight + 18)
+            .attr("text-anchor", "middle")
+            .attr("fill", mutedText)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(8, valueFontSize * 0.92)}px`)
+            .text(formatLocalValue(tick, false));
+    });
+
+    plot.append("line")
+        .attr("class", "zero-line")
+        .attr("x1", zeroX)
+        .attr("x2", zeroX)
+        .attr("y1", -8)
+        .attr("y2", chartHeight)
+        .attr("stroke", axisColor)
+        .attr("stroke-width", 1.8)
+        .attr("opacity", 0.9);
+
+    if (hasGroupedSplit) {
+        const splitY = yScale(sortedData[signSplitIndex].__id) - yScale.step() * 0.5 + sectionGap * 0.5;
+        plot.append("line")
+            .attr("class", "sign-section-divider")
+            .attr("x1", 0)
+            .attr("x2", chartWidth)
+            .attr("y1", splitY)
+            .attr("y2", splitY)
+            .attr("stroke", "#cfdbe8")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "4,5");
+    }
+
+    function sectionBadge(x, y, color, softColor, label, symbol) {
+        const group = plot.append("g")
+            .attr("class", "sign-section-badge")
+            .attr("transform", `translate(${x}, ${y})`);
+        group.append("circle")
+            .attr("cx", 0)
+            .attr("cy", 0)
+            .attr("r", 10)
+            .attr("fill", color)
+            .attr("opacity", 0.96);
+        group.append("text")
+            .attr("x", 0)
+            .attr("y", 0.5)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", "#ffffff")
+            .style("font-family", annotationFamily)
+            .style("font-size", "12px")
+            .style("font-weight", 800)
+            .text(symbol);
+        group.append("rect")
+            .attr("x", 14)
+            .attr("y", -11)
+            .attr("width", Math.max(106, label.length * 7.4 + 22))
+            .attr("height", 22)
+            .attr("rx", 11)
+            .attr("fill", softColor);
+        group.append("text")
+            .attr("x", 25)
+            .attr("y", 0.5)
+            .attr("dominant-baseline", "middle")
+            .attr("fill", color)
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(8.5, Math.min(baseLabelSize, 11))}px`)
+            .style("font-weight", 800)
+            .text(label);
+    }
+
+    if (hasNegative) {
+        sectionBadge(Math.max(10, zeroX - 150), -30, negativeColor, negativeSoft, "Negative values", "-");
+    }
+    if (hasPositive && !hasGroupedSplit) {
+        sectionBadge(Math.min(chartWidth - 150, zeroX + 26), -30, positiveColor, positiveSoft, "Positive values", "+");
+    }
+    if (hasGroupedSplit) {
+        const splitY = yScale(sortedData[signSplitIndex].__id) - yScale.step() * 0.5 + sectionGap * 0.5;
+        sectionBadge(Math.min(chartWidth - 150, zeroX + 26), splitY, positiveColor, positiveSoft, "Positive values", "+");
+    }
+
+    const rowGroups = plot.selectAll(".bar-row")
+        .data(sortedData)
+        .enter()
+        .append("g")
+        .attr("class", "bar-row")
+        .attr("data-label", d => d.__label)
+        .attr("data-value", d => d.__value)
+        .attr("data-index", d => d.__index)
+        .attr("data-order", d => d.__id)
+        .attr("data-sign", d => d.__value >= 0 ? "positive" : "negative")
+        .attr("transform", d => `translate(0, ${rowY(d)})`);
+
+    rowGroups.append("text")
+        .attr("class", "category-label")
+        .attr("data-label", d => d.__label)
+        .attr("data-value", d => d.__value)
+        .attr("x", d => d.__value >= 0 ? zeroX - 12 : zeroX + 12)
+        .attr("y", rowHeight / 2)
+        .attr("text-anchor", d => d.__value >= 0 ? "end" : "start")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", inkColor)
+        .style("font-family", labelFamily)
+        .style("font-size", `${labelFontSize}px`)
+        .style("font-weight", labelWeight)
+        .text(d => compactLabel(d.__label, labelMaxChars));
+
+    rowGroups.append("rect")
+        .attr("class", d => `diverging-bar data-point mark ${d.__value >= 0 ? "positive-bar" : "negative-bar"}`)
+        .attr("data-tag", "mark")
+        .attr("data-label", d => d.__label)
+        .attr("data-value", d => d.__value)
+        .attr("data-order", d => d.__id)
+        .attr("x", d => d.__value >= 0 ? zeroX : xScale(d.__value))
+        .attr("y", Math.max(0, rowHeight * 0.13))
+        .attr("width", d => Math.max(1, Math.abs(xScale(d.__value) - zeroX)))
+        .attr("height", Math.max(3, rowHeight * 0.74))
+        .attr("rx", Math.min(rowHeight / 2, 9))
+        .attr("ry", Math.min(rowHeight / 2, 9))
+        .attr("fill", d => d.__value >= 0 ? "url(#diverging_bar_02_positive_gradient)" : "url(#diverging_bar_02_negative_gradient)")
+        .attr("opacity", 0.96)
+        .attr("stroke", variables.has_stroke ? "#ffffff" : "none")
+        .attr("stroke-width", variables.has_stroke ? 0.8 : 0);
+
+    rowGroups.append("text")
+        .attr("class", "value-label")
+        .attr("data-label", d => d.__label)
+        .attr("data-value", d => d.__value)
+        .attr("x", d => {
+            const end = xScale(d.__value);
+            const pad = 8;
+            if (d.__value >= 0) return Math.min(chartWidth, end + pad);
+            return Math.max(0, end - pad);
+        })
+        .attr("y", rowHeight / 2)
+        .attr("text-anchor", d => d.__value >= 0 ? "start" : "end")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", d => d.__value >= 0 ? positiveColor : negativeColor)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${valueFontSize}px`)
+        .style("font-weight", 800)
+        .text(d => formatLocalValue(d.__value, true));
+
+    svg.append("text")
+        .attr("class", "axis-title")
+        .attr("x", margin.left + chartWidth / 2)
+        .attr("y", cardY + cardHeight - 16)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("fill", axisColor)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8.5, baseValueSize * 0.86)}px`)
+        .style("font-weight", 700)
+        .text(valueUnit && valueUnit !== "none"
+            ? `${humanizeField(valueField)} (${valueUnit})`
+            : humanizeField(valueField));
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_03.js

@@ -0,0 +1,690 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Horizontal Diverging Bar Chart",
+    "chart_name": "horizontal_diverging_bar_chart_04",
+    "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": ["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": "styled",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const rawRows = (jsonData.data && jsonData.data.data) || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const colors = jsonData.colors || {};
+    const images = jsonData.images || { field: {}, other: {} };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const columns = chartUtils.schema.columns(jsonData);
+
+    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 dimensionColumn = columns.find(c => c.name === dimensionField) || {};
+    const valueUnit = valueChannel.unit && valueChannel.unit !== "none" ? valueChannel.unit : "";
+
+    d3.select(containerSelector).html("");
+
+    const width = 1566;
+    const height = 1004;
+    const bgColor = "#E2F1F6";
+    const textColor = colorResolver.text({ fallback: "#12304f" }).value || "#12304f";
+    const titleColor = "#08264A";
+    const mutedText = "#45515A";
+    const fieldImages = (images && images.field) || {};
+    const primaryImage = images && images.other && images.other.primary;
+
+    const titleText = (jsonData.titles && jsonData.titles.main_title) ||
+        (jsonData.metadata && jsonData.metadata.title) ||
+        "Diverging Comparison";
+    const subtitleText = (jsonData.titles && jsonData.titles.sub_title) ||
+        (jsonData.metadata && jsonData.metadata.description) ||
+        (jsonData.description || "");
+
+    const isTemporal = dimensionColumn.data_type === "temporal" ||
+        rawRows.every(d => /^\d{4}$/.test(String(d[dimensionField])));
+    function parseTemporal(value) {
+        const raw = String(value);
+        if (/^\d{4}$/.test(raw)) return +raw;
+        const parsed = Date.parse(raw);
+        return Number.isFinite(parsed) ? parsed : raw;
+    }
+
+    const groups = [...new Set(rawRows.map(d => d[groupField]).filter(d => d !== undefined))].slice(0, 2);
+    const leftGroup = groups[0] || "Left";
+    const rightGroup = groups[1] || "Right";
+    let dimensions = [...new Set(rawRows.map(d => d[dimensionField]).filter(d => d !== undefined))];
+    if (isTemporal) {
+        dimensions = dimensions.sort((a, b) => {
+            const av = parseTemporal(a);
+            const bv = parseTemporal(b);
+            if (typeof av === "number" && typeof bv === "number") return av - bv;
+            return String(a).localeCompare(String(b));
+        });
+    }
+
+    const lookup = new Map();
+    rawRows.forEach((d, i) => {
+        lookup.set(`${d[dimensionField]}|||${d[groupField]}`, { ...d, __inputIndex: i, __value: +d[valueField] || 0 });
+    });
+    const rows = dimensions.map((dimension, index) => ({
+        dimension,
+        index,
+        left: lookup.get(`${dimension}|||${leftGroup}`),
+        right: lookup.get(`${dimension}|||${rightGroup}`)
+    })).filter(row => row.left || row.right);
+    const rowCount = Math.max(1, rows.length);
+    const allValues = rawRows.map(d => +d[valueField] || 0);
+    const maxValue = d3.max(allValues) || 1;
+
+    function groupColor(group, fallback, side) {
+        const resolved = colorResolver.field(group, 0, { fallbackKey: side === "left" ? "primary" : "secondary" }).value;
+        return resolved || fallback;
+    }
+    const leftColor = colorResolver.variant(groupColor(leftGroup, "#A50F15", "left"), { mode: "darker", amount: 0.04 });
+    const rightColor = colorResolver.variant(groupColor(rightGroup, "#164C82", "right"), { mode: "darker", amount: 0.42 });
+
+    function safeId(value) {
+        return String(value || "").replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() || "item";
+    }
+
+    function humanize(text) {
+        return String(text == null ? "" : text)
+            .replace(/_/g, " ")
+            .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+            .replace(/\s*-\s*/g, " - ")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .attr("style", "max-width: 100%; height: auto;");
+
+    const defs = svg.append("defs");
+    const bg = defs.append("linearGradient")
+        .attr("id", "hdbc04-bg")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    bg.append("stop").attr("offset", "0%").attr("stop-color", "#F6FCFD");
+    bg.append("stop").attr("offset", "55%").attr("stop-color", bgColor);
+    bg.append("stop").attr("offset", "100%").attr("stop-color", "#D9EEF5");
+
+    function addGradient(id, base, side) {
+        const gradient = defs.append("linearGradient")
+            .attr("id", id)
+            .attr("x1", side === "left" ? "100%" : "0%")
+            .attr("x2", side === "left" ? "0%" : "100%")
+            .attr("y1", "0%")
+            .attr("y2", "0%");
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(base, { mode: "darker", amount: 0.12 }));
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(base, { mode: "brighter", amount: 0.10 }));
+    }
+    addGradient("hdbc04-left-bar", leftColor, "left");
+    addGradient("hdbc04-right-bar", rightColor, "right");
+
+    const shadow = defs.append("filter")
+        .attr("id", "hdbc04-soft-shadow")
+        .attr("x", "-25%").attr("y", "-25%")
+        .attr("width", "150%").attr("height", "150%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 5)
+        .attr("flood-color", "#163246")
+        .attr("flood-opacity", 0.16);
+
+    svg.append("rect")
+        .attr("class", "poster-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 28)
+        .attr("fill", "url(#hdbc04-bg)");
+    svg.append("rect")
+        .attr("x", 1.5)
+        .attr("y", 1.5)
+        .attr("width", width - 3)
+        .attr("height", height - 3)
+        .attr("rx", 28)
+        .attr("fill", "none")
+        .attr("stroke", "#D4EAF1")
+        .attr("stroke-width", 3);
+
+    function measure(text, fontSize, fontWeight = 400, family = "Arial, Helvetica, sans-serif") {
+        return chartUtils.text.measure(svg, String(text || ""), {
+            fontFamily: family,
+            fontSize: `${fontSize}px`,
+            fontWeight
+        }).width;
+    }
+
+    function wrapLines(text, maxWidth, fontSize, fontWeight, maxLines, family) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let line = "";
+        words.forEach(word => {
+            const candidate = line ? `${line} ${word}` : word;
+            if (line && measure(candidate, fontSize, fontWeight, family) > maxWidth) {
+                lines.push(line);
+                line = word;
+            } else {
+                line = candidate;
+            }
+        });
+        if (line) lines.push(line);
+        const visible = lines.slice(0, maxLines);
+        if (lines.length > maxLines && visible.length) {
+            let last = visible[visible.length - 1];
+            while (last.length > 4 && measure(`${last}...`, fontSize, fontWeight, family) > maxWidth) {
+                last = last.split(/\s+/).slice(0, -1).join(" ");
+                if (!last) break;
+            }
+            visible[visible.length - 1] = `${last || visible[visible.length - 1]}...`;
+        }
+        return visible;
+    }
+
+    function addWrappedText(parent, text, x, y, maxWidth, options) {
+        const cfg = {
+            fontFamily: "Arial, Helvetica, sans-serif",
+            fontSize: 24,
+            fontWeight: 400,
+            fill: textColor,
+            anchor: "start",
+            lineHeight: 1.18,
+            maxLines: 3,
+            transform: value => value,
+            ...options
+        };
+        const lines = wrapLines(cfg.transform(text), maxWidth, cfg.fontSize, cfg.fontWeight, cfg.maxLines, cfg.fontFamily);
+        const el = parent.append("text")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", cfg.anchor)
+            .style("font-family", cfg.fontFamily)
+            .style("font-size", `${cfg.fontSize}px`)
+            .style("font-weight", cfg.fontWeight)
+            .style("fill", cfg.fill)
+            .style("letter-spacing", "0");
+        lines.forEach((line, i) => {
+            el.append("tspan")
+                .attr("x", x)
+                .attr("dy", i === 0 ? 0 : `${cfg.lineHeight}em`)
+                .text(line);
+        });
+        return el;
+    }
+
+    function formatValue(value) {
+        const abs = Math.abs(value);
+        let text;
+        if (abs >= 1000) {
+            const scaled = value / 1000;
+            text = `${Number.isInteger(scaled) ? scaled.toFixed(0) : scaled.toFixed(abs >= 10000 ? 0 : 2).replace(/0+$/, "").replace(/\.$/, "")}K`;
+        } else if (abs >= 100) {
+            text = chartUtils.format.autoText(value);
+        } else if (abs >= 10) {
+            text = Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/0$/, "").replace(/\.$/, "");
+        } else {
+            text = chartUtils.format.autoText(value);
+        }
+        return `${text}${valueUnit && !text.endsWith(valueUnit) ? valueUnit : ""}`;
+    }
+
+    const leftColumn = { x: 78, y: 66, w: 440, h: 828 };
+    const imageSlot = { x: leftColumn.x + 30, y: leftColumn.y + 28, w: 340, h: 356 };
+    const titleY = leftColumn.y + 470;
+
+    const contextGroup = svg.append("g")
+        .attr("class", "asset-slot left-context-image-slot")
+        .attr("data-asset-slot", "left-context-image")
+        .attr("data-reserved-slot", "left_context_image_slot")
+        .attr("data-asset-source-policy", primaryImage ? "input_asset" : "image2_asset_or_neutral_placeholder")
+        .attr("data-anchor", "left-title-safe-area-above-title")
+        .attr("data-collision-rule", "stay inside left column; avoid title, subtitle, group headers, bars, and category labels")
+        .attr("data-bbox", `${imageSlot.x},${imageSlot.y},${imageSlot.w},${imageSlot.h}`);
+    contextGroup.append("circle")
+        .attr("cx", imageSlot.x + imageSlot.w / 2)
+        .attr("cy", imageSlot.y + imageSlot.h / 2)
+        .attr("r", Math.min(imageSlot.w, imageSlot.h) * 0.47)
+        .attr("fill", "#CDEAF1")
+        .attr("opacity", 0.72);
+    if (primaryImage) {
+        const clipId = "hdbc04-left-context-clip";
+        defs.append("clipPath").attr("id", clipId)
+            .append("circle")
+            .attr("cx", imageSlot.x + imageSlot.w / 2)
+            .attr("cy", imageSlot.y + imageSlot.h / 2)
+            .attr("r", Math.min(imageSlot.w, imageSlot.h) * 0.47);
+        contextGroup.append("image")
+            .attr("x", imageSlot.x + 12)
+            .attr("y", imageSlot.y + 12)
+            .attr("width", imageSlot.w - 24)
+            .attr("height", imageSlot.h - 24)
+            .attr("preserveAspectRatio", "xMidYMid meet")
+            .attr("clip-path", `url(#${clipId})`)
+            .attr("opacity", 0.95)
+            .attr("href", primaryImage)
+            .attr("xlink:href", primaryImage);
+    } else {
+        contextGroup.append("rect")
+            .attr("x", imageSlot.x + 45)
+            .attr("y", imageSlot.y + 60)
+            .attr("width", imageSlot.w - 90)
+            .attr("height", imageSlot.h - 120)
+            .attr("rx", 18)
+            .attr("fill", "none")
+            .attr("stroke", "#91B0BC")
+            .attr("stroke-dasharray", "10 8")
+            .attr("opacity", 0.55);
+    }
+
+    const titleFamily = (typography.title && typography.title.font_family) || "Arial, Helvetica, sans-serif";
+    addWrappedText(svg, titleText, leftColumn.x, titleY, leftColumn.w, {
+        fontFamily: titleFamily,
+        fontSize: 36,
+        fontWeight: 900,
+        fill: titleColor,
+        maxLines: 4,
+        lineHeight: 1.12,
+        transform: value => String(value || "").toUpperCase()
+    });
+    svg.append("line")
+        .attr("x1", leftColumn.x)
+        .attr("x2", leftColumn.x + 58)
+        .attr("y1", titleY + 142)
+        .attr("y2", titleY + 142)
+        .attr("stroke", "#1E7892")
+        .attr("stroke-width", 4);
+    addWrappedText(svg, subtitleText, leftColumn.x, titleY + 192, leftColumn.w - 28, {
+        fontFamily: "Arial, Helvetica, sans-serif",
+        fontSize: 26,
+        fontWeight: 400,
+        fill: mutedText,
+        maxLines: 4,
+        lineHeight: 1.25
+    });
+
+    const plot = {
+        left: 512,
+        right: 1512,
+        top: 150,
+        bottom: 860
+    };
+    const rowBand = (plot.bottom - plot.top) / rowCount;
+    const rowGap = Math.max(5, Math.min(12, rowBand * 0.15));
+    const barH = Math.max(17, Math.min(56, rowBand - rowGap));
+    const chipR = Math.max(17, Math.min(31, barH * 0.55));
+    const labelGap = 16;
+    const iconX = 938;
+    const leftInnerX = 888;
+    const rightInnerX = 1100;
+    const categoryLabelX = iconX + chipR + 14;
+    const categoryW = Math.max(76, rightInnerX - categoryLabelX - 8);
+    const leftMinX = plot.left + 120;
+    const rightMaxX = plot.right - 110;
+    const leftMaxValue = d3.max(rawRows.filter(d => d[groupField] === leftGroup), d => +d[valueField] || 0) || maxValue;
+    const rightMaxValue = d3.max(rawRows.filter(d => d[groupField] === rightGroup), d => +d[valueField] || 0) || maxValue;
+    const leftScale = d3.scaleLinear().domain([0, leftMaxValue]).range([0, 315]);
+    const rightScale = d3.scaleLinear().domain([0, rightMaxValue]).range([0, 365]);
+
+    function groupIcon(group, x, y, color, side, options = {}) {
+        const r = options.radius || 27;
+        const visible = options.visible !== false;
+        const bbox = `${(x - r).toFixed(1)},${(y - r).toFixed(1)},${(r * 2).toFixed(1)},${(r * 2).toFixed(1)}`;
+        const slot = svg.append("g")
+            .attr("class", "asset-slot group-icon-slot")
+            .attr("data-asset-slot", "group-icon")
+            .attr("data-group", String(group))
+            .attr("data-asset-source-policy", fieldImages[group] ? "input_asset" : "neutral_placeholder")
+            .attr("data-anchor", `${side}-group-header`)
+            .attr("data-collision-rule", "stay in header row above plot bars; keep at least 16px clear of measured group-title bbox; hide optional badge if no collision-free slot exists")
+            .attr("data-bbox", bbox)
+            .attr("data-collision-result", visible ? "visible_clear" : "hidden_no_collision_free_header_slot");
+        if (!visible) {
+            slot.append("circle")
+                .attr("cx", x)
+                .attr("cy", y)
+                .attr("r", r)
+                .attr("fill", "none")
+                .attr("stroke", "none");
+            return;
+        }
+        slot.append("circle")
+            .attr("cx", x)
+            .attr("cy", y)
+            .attr("r", r)
+            .attr("fill", colorResolver.variant(color, { mode: "brighter", amount: 0.85 }))
+            .attr("opacity", 0.96);
+        if (fieldImages[group]) {
+            slot.append("image")
+                .attr("x", x - r * 0.68)
+                .attr("y", y - r * 0.68)
+                .attr("width", r * 1.36)
+                .attr("height", r * 1.36)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("href", fieldImages[group])
+                .attr("xlink:href", fieldImages[group]);
+        } else {
+            slot.append("text")
+                .attr("x", x)
+                .attr("y", y + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", "22px")
+                .style("font-weight", 800)
+                .style("fill", color)
+                .text(String(group).trim().charAt(0).toUpperCase());
+        }
+    }
+
+    function addHeader(group, x, color, side) {
+        const y = 96;
+        const label = String(group || "").toUpperCase();
+        const minGap = 18;
+        const badgeR = label.length <= 18 ? 27 : 22;
+        let lines;
+        let fontSize;
+        let lineHeight;
+        if (label.length <= 18) {
+            lines = [label];
+            fontSize = 31;
+            lineHeight = fontSize * 1.02;
+        } else {
+            lines = wrapLines(label, 205, 17, 900, 2, "Arial, Helvetica, sans-serif");
+            fontSize = 17;
+            lineHeight = fontSize * 1.02;
+        }
+        const lineWidths = lines.map(line => measure(line, fontSize, 900, "Arial, Helvetica, sans-serif"));
+        const textLeft = d3.min(lineWidths, w => x - w / 2) || x;
+        const textRight = d3.max(lineWidths, w => x + w / 2) || x;
+        const textTop = label.length <= 18 ? y - fontSize : y - 9 - fontSize;
+        const textBottom = (label.length <= 18 ? y : y - 9) + Math.max(1, lines.length - 1) * lineHeight + 4;
+        let badgeX = textLeft - minGap - badgeR;
+        const headerSafeLeft = side === "left" ? plot.left + 6 : rightInnerX + 8;
+        const headerSafeRight = side === "left" ? leftInnerX - 6 : plot.right - 8;
+        let badgeVisible = true;
+        if (badgeX - badgeR < headerSafeLeft) {
+            const rightCandidate = textRight + minGap + badgeR;
+            if (rightCandidate + badgeR <= headerSafeRight) {
+                badgeX = rightCandidate;
+            } else {
+                badgeVisible = false;
+                badgeX = Math.max(headerSafeLeft + badgeR, Math.min(headerSafeRight - badgeR, textLeft - minGap - badgeR));
+            }
+        }
+        const badgeY = label.length <= 18 ? y - 6 : (textTop + textBottom) / 2 - 1;
+        groupIcon(group, badgeX, badgeY, color, side, { radius: badgeR, visible: badgeVisible });
+        if (label.length <= 18) {
+            svg.append("text")
+                .attr("x", x)
+                .attr("y", y)
+                .attr("text-anchor", "middle")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", "31px")
+                .style("font-weight", 900)
+                .style("fill", color)
+                .style("letter-spacing", "0")
+                .text(label);
+        } else {
+            const el = svg.append("text")
+                .attr("x", x)
+                .attr("y", y - 9)
+                .attr("text-anchor", "middle")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", "17px")
+                .style("font-weight", 900)
+                .style("fill", color)
+                .style("letter-spacing", "0");
+            lines.forEach((line, i) => {
+                el.append("tspan")
+                    .attr("x", x)
+                    .attr("dy", i === 0 ? 0 : `${lineHeight / fontSize}em`)
+                    .text(line);
+            });
+            el.attr("data-header-text-bbox", `${textLeft.toFixed(1)},${textTop.toFixed(1)},${(textRight - textLeft).toFixed(1)},${(textBottom - textTop).toFixed(1)}`)
+                .attr("data-header-badge-gap", String(minGap));
+        }
+    }
+    addHeader(leftGroup, 752, leftColor, "left");
+    addHeader(rightGroup, 1294, rightColor, "right");
+
+    rows.forEach((row, index) => {
+        const y0 = plot.top + index * rowBand;
+        const cy = y0 + rowBand / 2;
+        svg.append("line")
+            .attr("class", "row-guide")
+            .attr("x1", plot.left + 42)
+            .attr("x2", plot.right - 38)
+            .attr("y1", y0 + rowBand)
+            .attr("y2", y0 + rowBand)
+            .attr("stroke", "#C5D9DF")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3 5")
+            .attr("opacity", 0.62);
+    });
+
+    function roundedOuterBarPath(xInner, y, barWidth, h, side) {
+        const r = Math.min(h / 2, 14, Math.max(2, barWidth / 2));
+        if (side === "left") {
+            const xOuter = xInner - barWidth;
+            return [
+                `M ${xInner} ${y}`,
+                `L ${xOuter + r} ${y}`,
+                `Q ${xOuter} ${y} ${xOuter} ${y + r}`,
+                `L ${xOuter} ${y + h - r}`,
+                `Q ${xOuter} ${y + h} ${xOuter + r} ${y + h}`,
+                `L ${xInner} ${y + h}`,
+                "Z"
+            ].join(" ");
+        }
+        const xOuter = xInner + barWidth;
+        return [
+            `M ${xInner} ${y}`,
+            `L ${xOuter - r} ${y}`,
+            `Q ${xOuter} ${y} ${xOuter} ${y + r}`,
+            `L ${xOuter} ${y + h - r}`,
+            `Q ${xOuter} ${y + h} ${xOuter - r} ${y + h}`,
+            `L ${xInner} ${y + h}`,
+            "Z"
+        ].join(" ");
+    }
+
+    function addValueLabel(value, endpoint, cy, side, barWidth) {
+        const text = formatValue(value);
+        const fontSize = Math.max(17, Math.min(28, barH * 0.52));
+        const labelWidth = measure(text, fontSize, 800);
+        if (Math.abs(value) < 1e-9) {
+            svg.append("text")
+                .attr("class", `zero-value ${side}-zero-value`)
+                .attr("x", side === "left" ? leftInnerX - 18 : rightInnerX + 18)
+                .attr("y", cy)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", side === "left" ? "end" : "start")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", `${fontSize}px`)
+                .style("font-weight", 800)
+                .style("fill", side === "left" ? leftColor : rightColor)
+                .text(text);
+            return;
+        }
+        if (side === "left") {
+            const shortLeftBar = barWidth < labelWidth + 72;
+            const externalX = Math.max(plot.left + 4, endpoint - labelGap);
+            const internalX = shortLeftBar ? endpoint + barWidth / 2 : leftInnerX - 20;
+            const internalStart = shortLeftBar ? internalX - labelWidth / 2 : internalX - labelWidth;
+            const externalEnd = externalX;
+            const renderInternal = internalStart - externalEnd > 8 || !shortLeftBar;
+            if (renderInternal) {
+                svg.append("text")
+                    .attr("class", "value-label left-value-label")
+                    .attr("x", internalX)
+                    .attr("y", cy)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", shortLeftBar ? "middle" : "end")
+                    .style("font-family", "Arial, Helvetica, sans-serif")
+                    .style("font-size", `${fontSize}px`)
+                    .style("font-weight", 800)
+                    .style("fill", "#FFFFFF")
+                    .text(text);
+            }
+            svg.append("text")
+                .attr("class", "outer-value left-outer-value")
+                .attr("x", externalX)
+                .attr("y", cy)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", `${fontSize}px`)
+                .style("font-weight", 800)
+                .style("fill", leftColor)
+                .text(text);
+        } else {
+            const inside = barWidth > labelWidth + 48;
+            svg.append("text")
+                .attr("class", "value-label right-value-label")
+                .attr("x", inside ? rightInnerX + barWidth - 20 : endpoint + labelGap)
+                .attr("y", cy)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", inside ? "end" : "start")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", `${fontSize}px`)
+                .style("font-weight", 800)
+                .style("fill", inside ? "#FFFFFF" : rightColor)
+                .text(text);
+        }
+    }
+
+    function addCategoryChip(row, cy) {
+        const dimension = row.dimension;
+        const slot = svg.append("g")
+            .attr("class", "asset-slot category-icon-slot")
+            .attr("data-asset-slot", "category-icon")
+            .attr("data-category", String(dimension))
+            .attr("data-asset-source-policy", fieldImages[dimension] ? "input_asset" : "neutral_placeholder")
+            .attr("data-anchor", "row-centerline-before-category-label")
+            .attr("data-collision-rule", "stay inside central label column and avoid bars/value labels")
+            .attr("data-bbox", `${(iconX - chipR).toFixed(1)},${(cy - chipR).toFixed(1)},${(chipR * 2).toFixed(1)},${(chipR * 2).toFixed(1)}`);
+        slot.append("circle")
+            .attr("cx", iconX)
+            .attr("cy", cy)
+            .attr("r", chipR)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", "#E6ECEE")
+            .attr("stroke-width", 1.2)
+            .attr("filter", "url(#hdbc04-soft-shadow)");
+        if (fieldImages[dimension]) {
+            slot.append("image")
+                .attr("x", iconX - chipR * 0.62)
+                .attr("y", cy - chipR * 0.62)
+                .attr("width", chipR * 1.24)
+                .attr("height", chipR * 1.24)
+                .attr("preserveAspectRatio", "xMidYMid meet")
+                .attr("href", fieldImages[dimension])
+                .attr("xlink:href", fieldImages[dimension]);
+        } else {
+            slot.append("text")
+                .attr("x", iconX)
+                .attr("y", cy + 1)
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", "Arial, Helvetica, sans-serif")
+                .style("font-size", `${Math.max(12, chipR * 0.58)}px`)
+                .style("font-weight", 800)
+                .style("fill", "#607D8B")
+                .text(String(dimension).trim().charAt(0).toUpperCase());
+        }
+    }
+
+    rows.forEach(row => {
+        const cy = plot.top + row.index * rowBand + rowBand / 2;
+        const y = cy - barH / 2;
+        const leftValue = row.left ? +row.left[valueField] || 0 : 0;
+        const rightValue = row.right ? +row.right[valueField] || 0 : 0;
+        const leftW = leftValue > 0 ? Math.max(3, leftScale(leftValue)) : 0;
+        const rightW = rightValue > 0 ? Math.max(3, rightScale(rightValue)) : 0;
+
+        if (leftW > 0) {
+            svg.append("path")
+                .attr("class", "bar left-bar")
+                .attr("d", roundedOuterBarPath(leftInnerX, y, leftW, barH, "left"))
+                .attr("fill", "url(#hdbc04-left-bar)")
+                .attr("data-category", String(row.dimension))
+                .attr("data-group", String(leftGroup))
+                .attr("data-value", leftValue)
+                .attr("data-cap-geometry", "flat-inner-edge-rounded-outer-value-edge");
+        }
+        if (rightW > 0) {
+            svg.append("path")
+                .attr("class", "bar right-bar")
+                .attr("d", roundedOuterBarPath(rightInnerX, y, rightW, barH, "right"))
+                .attr("fill", "url(#hdbc04-right-bar)")
+                .attr("data-category", String(row.dimension))
+                .attr("data-group", String(rightGroup))
+                .attr("data-value", rightValue)
+                .attr("data-cap-geometry", "flat-inner-edge-rounded-outer-value-edge");
+        }
+
+        addValueLabel(leftValue, leftInnerX - leftW, cy, "left", leftW);
+        addValueLabel(rightValue, rightInnerX + rightW, cy, "right", rightW);
+        addCategoryChip(row, cy);
+
+        const labelText = humanize(row.dimension);
+        const label = svg.append("text")
+            .attr("class", "category-label")
+            .attr("x", categoryLabelX)
+            .attr("y", cy)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "start")
+            .style("font-family", "Arial, Helvetica, sans-serif")
+            .style("font-size", `${Math.max(16, Math.min(24, rowBand * 0.30))}px`)
+            .style("font-weight", 600)
+            .style("fill", "#181F24")
+            .style("letter-spacing", "0")
+            .text(labelText);
+        const estimated = measure(labelText, Math.max(16, Math.min(24, rowBand * 0.30)), 600);
+        if (estimated > categoryW) {
+            label.attr("textLength", categoryW).attr("lengthAdjust", "spacingAndGlyphs");
+        }
+    });
+
+    svg.append("g")
+        .attr("class", "ignored-bottom-wrapper-policy")
+        .attr("data-ignored-element", "bottom_source_takeaway_footer")
+        .attr("data-policy", "not-rendered");
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_04.js

@@ -0,0 +1,551 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Diverging Bar Chart",
+    "chart_name": "diverging_bar_plain_chart_04",
+    "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": "styled",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 水平对比型条形图实现 - 使用D3.js  split_bar_chart02
+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 || 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;                  // 图表总宽度
+    const height = variables.height;                // 图表总高度
+    // 边距：top-顶部，right-右侧，bottom-底部，left-左侧
+    const margin = { top: 100, right: 70, bottom: 40, left: 70 };
+    
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;    // 绘图区宽度
+    const innerHeight = height - margin.top - margin.bottom;  // 绘图区高度
+    
+    // 设置各部分位置参数
+    const centerX = margin.left + innerWidth / 2;   // 图表中心X坐标
+    const topAreaHeight = 60;                       // 标题和标签区域高度
+    const barPadding = 8;                           // 条形图之间的间距
+    
+    // ---------- 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 allDimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 不对维度进行排序，直接使用原始顺序
+    const dimensions = [...allDimensions];
+    
+    // 使用前两个分组作为左右两侧显示数据
+    const leftGroup = groups[0];   // 左侧分组
+    const rightGroup = groups[1];  // 右侧分组
+    
+    // 如果存在第三个分组，可以用作总计分组（用于显示右侧的总数值）
+    const totalGroup = groups.length > 2 ? groups[2] : null;
+    
+    // ---------- 5. 动态计算维度标签区域宽度 ----------
+    
+    // 计算最大标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（附加单位，如果有）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        const totalWidth = textWidth + 5;
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // 为计算出的宽度添加边距，确保有足够空间
+    const dimensionLabelWidth = Math.max(maxLabelWidth + 5, 80);  // 最小值为80像素
+    
+    // ---------- 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");
+    
+    // ---------- 6.1 创建视觉效果 ----------
+    
+    const defs = svg.append("defs");
+    
+    const getColor = (group) => {
+        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", 4);
+        
+        filter.append("feOffset")
+            .attr("dx", 4)
+            .attr("dy", 4)
+            .attr("result", "offsetblur");
+        
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+    
+    if (variables.has_gradient) {
+        const leftGradientId = `gradient-${leftGroup.replace(/\s+/g, '-').toLowerCase()}`;
+        const leftBaseColor = getColor(leftGroup);
+        
+        const leftGradient = defs.append("linearGradient")
+            .attr("id", leftGradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+        
+        leftGradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(leftBaseColor, { mode: "brighter", amount: 1.2 }));
+        
+        leftGradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(leftBaseColor, { mode: "darker", amount: 0.7 }));
+        
+        const rightGradientId = `gradient-${rightGroup.replace(/\s+/g, '-').toLowerCase()}`;
+        const rightBaseColor = getColor(rightGroup);
+        
+        const rightGradient = defs.append("linearGradient")
+            .attr("id", rightGradientId)
+            .attr("x1", "100%")
+            .attr("y1", "0%")
+            .attr("x2", "0%")
+            .attr("y2", "0%");
+        
+        rightGradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", colorResolver.variant(rightBaseColor, { mode: "brighter", amount: 1.2 }));
+        
+        rightGradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", colorResolver.variant(rightBaseColor, { mode: "darker", amount: 0.7 }));
+    }
+
+// ---------- 7. 添加左右组标签 ----------
+    
+    const legendSquareSize = 12;
+    const legendSpacing = 5;
+    const legendFontFamily = typography.label.font_family;
+    const legendFontSize = typography.label.font_size || "14px";
+    const legendFontWeight = typography.label.font_weight || "bold";
+    
+    // 格式化组标签
+    const formattedLeftGroup = groupUnit ? `${leftGroup}${groupUnit}` : `${leftGroup}`;
+    const formattedRightGroup = groupUnit ? `${rightGroup}${groupUnit}` : `${rightGroup}`;
+    const labelMeasureOptions = {
+        fontFamily: legendFontFamily,
+        fontSize: legendFontSize,
+        fontWeight: legendFontWeight,
+    };
+    const leftTextWidth = chartUtils.text.measure(svg, formattedLeftGroup, labelMeasureOptions).width;
+    const rightTextWidth = chartUtils.text.measure(svg, formattedRightGroup, labelMeasureOptions).width;
+    const legendBaselineY = margin.top - 10;
+
+    chartUtils.legend.pair(svg, [
+        {
+            x: margin.left + innerWidth / 4 - (leftTextWidth + legendSquareSize + legendSpacing) / 2,
+            y: legendBaselineY - legendSquareSize / 2,
+            label: formattedLeftGroup,
+            color: getColor(leftGroup),
+        },
+        {
+            x: margin.left + innerWidth * 3 / 4 - (rightTextWidth + legendSquareSize + legendSpacing) / 2,
+            y: legendBaselineY - legendSquareSize / 2,
+            label: formattedRightGroup,
+            color: getColor(rightGroup),
+        },
+    ], {
+        markerSize: legendSquareSize,
+        labelGap: legendSpacing,
+        fontFamily: legendFontFamily,
+        fontSize: legendFontSize,
+        fontWeight: legendFontWeight,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+        className: "group-label-legend",
+    });
+    
+    // ---------- 8. 创建绘图组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // ---------- 9. 创建比例尺 ----------
+    
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(variables.has_spacing ? 0.4 : 0.3);
+    
+    const maxLeftValue = d3.max(chartData.filter(d => d[groupField] === leftGroup), d => +d[valueField]);
+    const maxRightValue = d3.max(chartData.filter(d => d[groupField] === rightGroup), d => +d[valueField]);
+    
+    const leftXScale = d3.scaleLinear()
+        .domain([0, maxLeftValue])
+        .range([innerWidth / 2 - dimensionLabelWidth/2, 0]);
+    
+    const rightXScale = d3.scaleLinear()
+        .domain([0, maxRightValue])
+        .range([0, innerWidth / 2 - dimensionLabelWidth/2]);
+    
+    const getStrokeColor = () => {
+        const stroke = colorResolver.other("stroke_color", { fallback: "" }).value;
+        if (stroke) return stroke;
+        return colorResolver.available(0, { fallback: "#333333" }).value;
+    };
+    const strokeColor = getStrokeColor();
+    
+    // ---------- 9. 添加交替行背景 ----------
+    if (jsonData.variation?.background === "styled") {
+        dimensions.forEach((dimension, i) => {
+            if (i % 2 === 0) {
+                g.append("rect")
+                    .attr("x", -margin.left/2)
+                    .attr("y", yScale(dimension))
+                    .attr("width", innerWidth + margin.left/2 + margin.right/2)
+                    .attr("height", yScale.bandwidth())
+                    .attr("class","background")
+                    .attr("fill", "#f5f5f5")
+                    .attr("opacity", 0.8);
+            }
+        });
+    }
+    
+// ---------- 10. 绘制维度标签和图标 ----------
+    
+    dimensions.forEach(dimension => {
+        const yPos = yScale(dimension) + yScale.bandwidth() / 2;
+        
+        
+        
+        const formattedDimension = dimensionUnit ? `${dimension}${dimensionUnit}` : `${dimension}`;
+        
+        // If not showing icons, center the text only
+        const startX = innerWidth/2;
+        
+        // Add centered text without icon
+        g.append("text")
+            .attr("x", startX)
+            .attr("y", yPos)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "middle")
+            .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("font-weight", typography.label.font_weight)
+            .text(formattedDimension);
+        
+    });
+    
+    // ---------- 11. 绘制左侧条形图 ----------
+    
+    // 为每个维度绘制左侧条形
+    dimensions.forEach(dimension => {
+        // 查找数据点
+        const dataPoint = chartData.find(d => 
+            d[dimensionField] === dimension && d[groupField] === leftGroup
+        );
+        
+        if (dataPoint) {
+            // 计算条形宽度
+            const barWidth = innerWidth/2 - dimensionLabelWidth/2 - leftXScale(+dataPoint[valueField]);
+            
+            // Y位置
+            const yPos = yScale(dimension);
+            
+            // 绘制条形
+            g.append("rect")
+                .attr("x", leftXScale(+dataPoint[valueField]))  // 左侧起点
+                .attr("y", yPos)                     // 条形顶部
+                .attr("width", barWidth)             // 条形宽度
+                .attr("height", yScale.bandwidth())  // 条形高度
+                .attr("fill", variables.has_gradient ?
+                    `url(#gradient-${leftGroup.replace(/\s+/g, '-').toLowerCase()})` :
+                    getColor(leftGroup)
+                )
+                .attr("rx", variables.has_rounded_corners ? 4 : 0) // 圆角半径(如果启用)
+                .attr("ry", variables.has_rounded_corners ? 4 : 0)
+                .style("stroke", variables.has_stroke ? strokeColor : "none") // 边框
+                .style("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none") // 阴影
+                .on("mouseover", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 0.8);
+                })
+                .on("mouseout", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 1);
+                });
+            
+            // 绘制数值标签（附加单位，如果有）
+            const formattedValue = valueUnit ? 
+            `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+            `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+                
+            const textWidth = chartUtils.text.measure(g, formattedValue, {
+                fontFamily: typography.annotation.font_family,
+                fontSize: typography.annotation.font_size,
+                fontWeight: typography.annotation.font_weight
+            }).width;
+            
+            // 计算文本位置 - 默认在条形中间
+            let textX = leftXScale(+dataPoint[valueField]) + barWidth/2;
+            
+            // 确保文本末尾不超出条形右侧边界
+            // 如果文本一半宽度超出右边界，则调整位置
+            const rightBoundary = leftXScale(+dataPoint[valueField]) + barWidth;
+            if (textX + textWidth/2 > rightBoundary) {
+                textX = rightBoundary - textWidth/2 - 2; // 减去2像素的安全边距
+            }
+            g.append("text")
+                    .attr("class", "label")
+                    .attr("x", leftXScale(+dataPoint[valueField])-3) // 条形左边缘（不加偏移，确保紧挨）
+                    .attr("y", yPos + yScale.bandwidth()/2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "end") // 右对齐，使文本右边缘与x点对齐
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value) // 使用普通文本颜色
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", typography.annotation.font_size)
+                    .style("font-weight", typography.annotation.font_weight)
+                    .style("pointer-events", "none")
+                    .text(formattedValue);
+            // 如果条形太窄，无法容纳文本（小于文本宽度），则不显示文本
+            // if (barWidth < textWidth) {
+            //     // 将文本放在条形外部左侧，文本右边缘紧挨条形左边缘
+            //     g.append("text")
+            //         .attr("class", "label")
+            //         .attr("x", leftXScale(+dataPoint[valueField])-3) // 条形左边缘（不加偏移，确保紧挨）
+            //         .attr("y", yPos + yScale.bandwidth()/2)
+            //         .attr("dy", "0.35em")
+            //         .attr("text-anchor", "end") // 右对齐，使文本右边缘与x点对齐
+            //         .style("fill", colorResolver.text({ fallback: "#333333" }).value) // 使用普通文本颜色
+            //         .style("font-family", typography.annotation.font_family)
+            //         .style("font-size", typography.annotation.font_size)
+            //         .style("font-weight", typography.annotation.font_weight)
+            //         .style("pointer-events", "none")
+            //         .text(formattedValue);
+            // } else {
+            //     // 正常在条形内显示文本
+            //     g.append("text")
+            //         .attr("class", "label")
+            //         .attr("x", textX)
+            //         .attr("y", yPos + yScale.bandwidth()/2)
+            //         .attr("dy", "0.35em")
+            //         .attr("text-anchor", "middle")
+            //         .style("fill", "#ffffff") // 白色文本
+            //         .style("font-family", typography.annotation.font_family)
+            //         .style("font-size", typography.annotation.font_size)
+            //         .style("font-weight", typography.annotation.font_weight)
+            //         .style("pointer-events", "none")
+            //         .text(formattedValue);
+            // }
+        }
+    });
+    
+    // ---------- 12. 绘制右侧条形图 ----------
+    
+    // 为每个维度绘制右侧条形
+    dimensions.forEach(dimension => {
+        // 查找数据点
+        const dataPoint = chartData.find(d => 
+            d[dimensionField] === dimension && d[groupField] === rightGroup
+        );
+        
+        if (dataPoint) {
+            // 计算条形宽度
+            const barWidth = rightXScale(+dataPoint[valueField]);
+            
+            // Y位置
+            const yPos = yScale(dimension);
+            
+            // 条形的左边界位置
+            const barLeft = innerWidth/2 + dimensionLabelWidth/2;
+            
+            // 绘制条形 - 应用与左侧相同的视觉效果
+            g.append("rect")
+                .attr("x", barLeft) // 从中间右侧开始
+                .attr("y", yPos)                    // 条形顶部
+                .attr("width", barWidth)            // 条形宽度
+                .attr("height", yScale.bandwidth()) // 条形高度
+                .attr("fill", variables.has_gradient ?
+                    `url(#gradient-${rightGroup.replace(/\s+/g, '-').toLowerCase()})` :
+                    getColor(rightGroup)
+                )
+                .attr("rx", variables.has_rounded_corners ? 4 : 0) // 圆角半径(如果启用)
+                .attr("ry", variables.has_rounded_corners ? 4 : 0)
+                .style("stroke", variables.has_stroke ? strokeColor : "none") // 边框
+                .style("stroke-width", variables.has_stroke ? 1 : 0)
+                .style("filter", variables.has_shadow ? "url(#shadow)" : "none") // 阴影
+                .on("mouseover", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 0.8);
+                })
+                .on("mouseout", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 1);
+                });
+            
+            // 绘制数值标签（附加单位，如果有）
+            const formattedValue = valueUnit ? 
+            `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+            `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+                
+            const textWidth = chartUtils.text.measure(g, formattedValue, {
+                fontFamily: typography.annotation.font_family,
+                fontSize: typography.annotation.font_size,
+                fontWeight: typography.annotation.font_weight
+            }).width;
+            
+            // 计算文本位置 - 默认在条形中间
+            let textX = barLeft + barWidth/2;
+            
+            // 确保文本起始位置不超出条形左侧边界
+            if (textX - textWidth/2 < barLeft) {
+                textX = barLeft + textWidth/2 + 2; // 加上2像素的安全边距
+            }
+            g.append("text")
+                    .attr("class", "label")
+                    .attr("x", barLeft + barWidth + 5) // 条形右边缘（不加偏移，确保紧挨）
+                    .attr("y", yPos + yScale.bandwidth()/2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "start") // 左对齐，使文本左边缘与x点对齐
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value) // 使用普通文本颜色
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", typography.annotation.font_size)
+                    .style("font-weight", typography.annotation.font_weight)
+                    .style("pointer-events", "none")
+                    .text(formattedValue);
+            // 如果条形太窄，无法容纳文本（小于文本宽度），则不显示文本
+            // if (barWidth < textWidth) {
+            //     // 将文本放在条形外部右侧，文本左边缘紧挨条形右边缘
+            //     g.append("text")
+            //         .attr("class", "label")
+            //         .attr("x", barLeft + barWidth + 5) // 条形右边缘（不加偏移，确保紧挨）
+            //         .attr("y", yPos + yScale.bandwidth()/2)
+            //         .attr("dy", "0.35em")
+            //         .attr("text-anchor", "start") // 左对齐，使文本左边缘与x点对齐
+            //         .style("fill", colorResolver.text({ fallback: "#333333" }).value) // 使用普通文本颜色
+            //         .style("font-family", typography.annotation.font_family)
+            //         .style("font-size", typography.annotation.font_size)
+            //         .style("font-weight", typography.annotation.font_weight)
+            //         .style("pointer-events", "none")
+            //         .text(formattedValue);
+            // } else {
+            //     // 正常在条形内显示文本
+            //     g.append("text")
+            //         .attr("class", "label")
+            //         .attr("x", textX)
+            //         .attr("y", yPos + yScale.bandwidth()/2)
+            //         .attr("dy", "0.35em")
+            //         .attr("text-anchor", "middle")
+            //         .style("fill", "#ffffff") // 白色文本
+            //         .style("font-family", typography.annotation.font_family)
+            //         .style("font-size", typography.annotation.font_size)
+            //         .style("font-weight", typography.annotation.font_weight)
+            //         .style("pointer-events", "none")
+            //         .text(formattedValue);
+            // }
+        }
+    });
+
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_05.js

@@ -0,0 +1,430 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Diverging Bar Chart",
+    "chart_name": "diverging_bar_plain_chart_05",
+    "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
+*/
+
+// 水平对比型条形图实现 - 使用D3.js horizontal_split_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: "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;                  // 图表总宽度
+    const height = variables.height;                // 图表总高度
+    // 边距：top-顶部，right-右侧，bottom-底部，left-左侧
+    const margin = { top: 100, right: 30, bottom: 40, left: 30 };
+    
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;    // 绘图区宽度
+    const innerHeight = height - margin.top - margin.bottom;  // 绘图区高度
+    
+    // 设置各部分位置参数
+    const centerX = margin.left + innerWidth / 2;   // 图表中心X坐标
+    const topAreaHeight = 60;                       // 标题和标签区域高度
+    const barPadding = 8;                           // 条形图之间的间距
+    
+    // ---------- 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 allDimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 不对维度进行排序，直接使用原始顺序
+    const dimensions = [...allDimensions];
+    
+    // 使用前两个分组作为左右两侧显示数据
+    const leftGroup = groups[0];   // 左侧分组
+    const rightGroup = groups[1];  // 右侧分组
+   
+    // 检查是否所有维度都同时具有左右两侧分组的数据
+    const isDataComplete = dimensions.every(dimension => {
+        const hasLeftData = chartData.some(d => d[dimensionField] === dimension && d[groupField] === leftGroup);
+        const hasRightData = chartData.some(d => d[dimensionField] === dimension && d[groupField] === rightGroup);
+        return hasLeftData && hasRightData;
+    });
+
+    // 如果数据不完整，显示错误信息并返回
+    if (!isDataComplete) {
+        d3.select(containerSelector)
+            .append("div")
+            .style("color", "orange") // 使用警告色
+            .style("text-align", "center")
+            .style("padding", "20px")
+            .style("font-family", typography?.label?.font_family || "Arial")
+            .style("font-size", typography?.label?.font_size || "12px")
+            .html("存在缺少左侧或右侧分组数据的维度，无法生成图表。");
+        return; // 停止执行
+    }
+    
+    // ---------- 5. 动态计算维度标签区域宽度 ----------
+
+    // 计算最大标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（附加单位，如果有）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        const totalWidth = textWidth + 5; // 只考虑文本宽度和少量边距
+        
+        maxLabelWidth = Math.max(maxLabelWidth, totalWidth);
+    });
+    
+    // 为计算出的宽度添加边距，确保有足够空间
+    const dimensionLabelWidth = Math.max(maxLabelWidth + 5, 80);  // 最小值为80像素
+    
+    // ---------- 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");
+    
+    // ---------- 6.1 创建视觉效果 ----------
+    
+    const defs = svg.append("defs");
+    
+    // 创建基于 group 的颜色比例尺
+    const colorScale = colorResolver.scale(groups, { palette: "category10" });
+
+    // 创建斜线纹理模式 - 每个 group 一个
+    const patternDensity = 6; // 固定斜线密度
+    const patternStrokeWidth = 1.5; // 固定斜线宽度
+    groups.forEach((group, i) => {
+        // 为每个组获取颜色
+        const groupColor = colorScale(group);
+        
+        // 创建斜线纹理模式
+        const patternId = `pattern-group-${group.replace(/[^a-zA-Z0-9]/g, '-')}-${i}`; // 基于 group 生成 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) // 使用 group 的颜色
+            .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 formattedLeftGroup = groupUnit ? `${leftGroup}${groupUnit}` : `${leftGroup}`;
+    svg.append("text")
+        .attr("x", margin.left + innerWidth / 4)
+        .attr("y", margin.top - 10)
+        .attr("text-anchor", "middle")
+        .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(formattedLeftGroup);
+    
+    const formattedRightGroup = groupUnit ? `${rightGroup}${groupUnit}` : `${rightGroup}`;
+    svg.append("text")
+        .attr("x", margin.left + innerWidth * 3 / 4)
+        .attr("y", margin.top - 10)
+        .attr("text-anchor", "middle")
+        .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(formattedRightGroup);
+    
+    // ---------- 8. 创建绘图组 ----------
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+    
+    // ---------- 9. 创建比例尺 ----------
+    
+    const yScale = d3.scaleBand()
+        .domain(dimensions) // 使用过滤后的维度
+        .range([0, innerHeight])
+        .padding(0.3); // 使用固定 padding
+    
+    // 计算全局最大值以统一比例尺
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+    
+    const leftXScale = d3.scaleLinear()
+        .domain([0, maxValue]) // 使用全局最大值
+        .range([innerWidth / 2 - dimensionLabelWidth/2, 0]);
+    
+    const rightXScale = d3.scaleLinear()
+        .domain([0, maxValue]) // 使用全局最大值
+        .range([0, innerWidth / 2 - dimensionLabelWidth/2]);
+    
+    // ---------- 10. 绘制维度标签和图标 ----------
+    
+    dimensions.forEach(dimension => {
+        const yPos = yScale(dimension) + yScale.bandwidth() / 2;
+        
+        const formattedDimension = dimensionUnit ? `${dimension}${dimensionUnit}` : `${dimension}`;
+        
+        // 始终将文本居中绘制在中间区域
+        const startX = innerWidth / 2; // X 坐标始终为中心点
+        g.append("text")
+            .attr("x", startX)
+            .attr("y", yPos)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "middle") // 始终居中对齐
+            .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("font-weight", typography.label.font_weight)
+            .text(formattedDimension);
+    });
+    
+    // ---------- 11. 绘制左侧条形图 ----------
+    
+    dimensions.forEach(dimension => {
+        const dataPoint = chartData.find(d => 
+            d[dimensionField] === dimension && d[groupField] === leftGroup
+        );
+        
+        if (dataPoint) {
+            const barWidth = innerWidth/2 - dimensionLabelWidth/2 - leftXScale(+dataPoint[valueField]);
+            const yPos = yScale(dimension);
+            
+            // 移除梯形相关的变量
+            // const slopeLeft = 5; 
+            const xStart = leftXScale(+dataPoint[valueField]); // 最左侧 X 坐标
+            const barHeight = yScale.bandwidth();
+            const radius = barHeight / 2; // 半圆半径
+            const xEnd = xStart + barWidth; // 右侧 X 坐标 (靠近中心)
+
+            // 生成左侧条形图路径 (借鉴新逻辑: 右直左半圆/椭圆弧)
+            let pathDataLeft;
+            // 处理零或负值，避免绘制错误
+            if (barWidth <= 0) {
+                pathDataLeft = ""; // 不绘制任何路径
+            } else if (barWidth < radius) {
+                
+                pathDataLeft = `M ${xEnd},${yPos} L ${xEnd},${yPos + barHeight} A ${barWidth},${radius} 0 0 1 ${xEnd},${yPos} Z`;
+            } else {
+                
+                pathDataLeft = `M ${xEnd},${yPos} L ${xEnd},${yPos + barHeight} L ${xStart + radius},${yPos + barHeight} A ${radius},${radius} 0 0 1 ${xStart + radius},${yPos} Z`;
+            }
+            
+            // 应用纹理填充 - 基于 group
+            const patternId = `pattern-group-${leftGroup.replace(/[^a-zA-Z0-9]/g, '-')}-${groups.indexOf(leftGroup)}`;
+            g.append("path")
+                .attr("d", pathDataLeft)
+                .attr("fill", `url(#${patternId})`) // 应用 group 的纹理
+                .on("mouseover", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 0.8);
+                })
+                .on("mouseout", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 1);
+                });
+            
+            // ------- 以下是数值标签原逻辑，不作改动 -------
+            const formattedValue = valueUnit ? 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+            
+            const valueLabelFontSize = `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`;
+            const textWidth = chartUtils.text.measure(g, formattedValue, {
+                fontFamily: typography.annotation.font_family,
+                fontSize: valueLabelFontSize,
+                fontWeight: typography.annotation.font_weight
+            }).width;
+            
+            let textX = leftXScale(+dataPoint[valueField]) - 10;
+            const rightBoundary = leftXScale(+dataPoint[valueField]) + barWidth;
+            if (textX + textWidth/2 > rightBoundary) {
+                textX = rightBoundary - textWidth/2 - 2;
+            }
+            g.append("text")
+                    .attr("class", "label")
+                    .attr("x", leftXScale(+dataPoint[valueField]) - 10)
+                    .attr("y", yPos + yScale.bandwidth()/2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "end")
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                    .style("font-weight", typography.annotation.font_weight)
+                    .style("pointer-events", "none")
+                    .text(formattedValue);
+        }
+    });
+    
+    // ---------- 12. 绘制右侧条形图 ----------
+    
+    dimensions.forEach(dimension => {
+        const dataPoint = chartData.find(d => 
+            d[dimensionField] === dimension && d[groupField] === rightGroup
+        );
+        
+        if (dataPoint) {
+            const barWidth = rightXScale(+dataPoint[valueField]);
+            const yPos = yScale(dimension);
+            const barLeft = innerWidth/2 + dimensionLabelWidth/2; // 左侧 X 坐标 (靠近中心)
+            
+            // 移除梯形相关的变量
+            // const slopeRight = 5;
+            const barHeight = yScale.bandwidth();
+            const radius = barHeight / 2; // 半圆半径
+            const xEnd = barLeft + barWidth; // 右侧 X 坐标
+
+            // 生成右侧条形图路径 (借鉴新逻辑: 左直右半圆/椭圆弧)
+            let pathDataRight;
+            // 处理零或负值，避免绘制错误
+            if (barWidth <= 0) {
+                pathDataRight = ""; // 不绘制任何路径
+            } else if (barWidth < radius) {
+                pathDataRight = `M ${barLeft},${yPos} A ${barWidth},${radius} 0 0 1 ${barLeft},${yPos + barHeight} Z`;
+            } else {
+                pathDataRight = `M ${barLeft},${yPos} H ${xEnd - radius} A ${radius},${radius} 0 0 1 ${xEnd - radius},${yPos + barHeight} H ${barLeft} Z`;
+            }
+            
+            // 应用纹理填充 - 基于 group
+            const patternId = `pattern-group-${rightGroup.replace(/[^a-zA-Z0-9]/g, '-')}-${groups.indexOf(rightGroup)}`;
+            g.append("path")
+                .attr("d", pathDataRight)
+                .attr("fill", `url(#${patternId})`) // 应用 group 的纹理
+                .on("mouseover", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 0.8);
+                })
+                .on("mouseout", function(event, d) {
+                    d3.select(this)
+                      .transition()
+                      .duration(100)
+                      .attr("opacity", 1);
+                });
+            
+            // ------- 以下是数值标签原逻辑，不作改动 -------
+            const formattedValue = valueUnit ? 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}${valueUnit}` : 
+                `${chartUtils.format.autoText(+dataPoint[valueField])}`;
+            
+            const valueLabelFontSize = `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`;
+            const textWidth = chartUtils.text.measure(g, formattedValue, {
+                fontFamily: typography.annotation.font_family,
+                fontSize: valueLabelFontSize,
+                fontWeight: typography.annotation.font_weight
+            }).width;
+            
+            let textX = barLeft + barWidth + 10;
+            if (textX - textWidth/2 < barLeft) {
+                textX = barLeft + textWidth/2 + 2;
+            }
+            g.append("text")
+                    .attr("class", "label")
+                    .attr("x", barLeft + barWidth + 10)
+                    .attr("y", yPos + yScale.bandwidth()/2)
+                    .attr("dy", "0.35em")
+                    .attr("text-anchor", "start")
+                    .style("fill", colorResolver.text({ fallback: "#333333" }).value)
+                    .style("font-family", typography.annotation.font_family)
+                    .style("font-size", `${Math.min(20,Math.max(barHeight * 0.6, parseFloat(typography.annotation.font_size)))}px`)
+                    .style("font-weight", typography.annotation.font_weight)
+                    .style("pointer-events", "none")
+                    .text(formattedValue);
+            
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type17_diverging_bar_chart/diverging_bar_plain_chart_06.js

@@ -0,0 +1,418 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Diverging Bar Chart",
+    "chart_name": "diverging_bar_plain_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, 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
+*/
+
+// 水平对比型条形图实现 - 使用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 || 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;                  // 图表总宽度
+    const height = variables.height;                // 图表总高度
+    // 边距：top-顶部，right-右侧，bottom-底部，left-左侧
+    const margin = { top: 100, right: 70, bottom: 40, left: 70 };
+    
+    // 计算实际绘图区域尺寸
+    const innerWidth = width - margin.left - margin.right;    // 绘图区宽度
+    const innerHeight = height - margin.top - margin.bottom;  // 绘图区高度
+    
+    // 设置各部分位置参数
+    const centerX = margin.left + innerWidth / 2;   // 图表中心X坐标
+    const topAreaHeight = 60;                       // 标题和标签区域高度
+    const barPadding = 8;                           // 条形图之间的间距
+    
+    // ---------- 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 allDimensions = [...new Set(chartData.map(d => d[dimensionField]))];
+    const groups = [...new Set(chartData.map(d => d[groupField]))];
+    
+    // 不对维度进行排序，直接使用原始顺序
+    const dimensions = [...allDimensions];
+    
+    // 使用前两个分组作为左右两侧显示数据
+    const leftGroup = groups[0];   // 左侧分组
+    const rightGroup = groups[1];  // 右侧分组
+    
+    // 找出两侧最大值，以确定棒子数量
+    const leftMax = d3.max(
+        chartData.filter(d => d[groupField] === leftGroup),
+        d => Math.abs(+d[valueField])
+    ) || 0;
+    
+    const rightMax = d3.max(
+        chartData.filter(d => d[groupField] === rightGroup),
+        d => Math.abs(+d[valueField])
+    ) || 0;
+    
+    // 取两侧绝对值最大的值
+    const overallMax = Math.max(leftMax, rightMax);
+    
+    // 棒子数量计算
+    const maxBars = 20; // 最大显示20个棒子
+    // 计算每个棒子代表的数值（向上取整确保覆盖所有值）
+    const valuePerBar = Math.ceil(overallMax / maxBars);
+    
+    // ---------- 5. 动态计算维度标签区域宽度 ----------
+    
+    // 计算最大标签宽度
+    let maxLabelWidth = 0;
+    dimensions.forEach(dimension => {
+        // 格式化维度名称（附加单位，如果有）
+        const formattedDimension = dimensionUnit ? 
+            `${dimension}${dimensionUnit}` : 
+            `${dimension}`;
+            
+        const textWidth = chartUtils.text.measure(null, formattedDimension, {
+            fontFamily: typography.label.font_family,
+            fontSize: typography.label.font_size,
+            fontWeight: typography.label.font_weight
+        }).width;
+        // 直接使用计算出的宽度
+        maxLabelWidth = Math.max(maxLabelWidth, textWidth);
+    });
+    
+    // 为计算出的宽度添加边距，确保有足够空间
+    const labelSidePadding = 15; // 标签两侧各留15像素的间距
+    const centerLabelAreaWidth = maxLabelWidth + labelSidePadding * 2; // 中心标签区域的总宽度
+    
+    // ---------- 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");
+    
+    // ---------- 6.1 创建视觉效果 ----------
+    
+    const defs = svg.append("defs");
+    
+    const getColor = (group) => {
+        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", 4);
+        
+        filter.append("feOffset")
+            .attr("dx", 4)
+            .attr("dy", 4)
+            .attr("result", "offsetblur");
+        
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+    
+    // 为左右两侧创建渐变
+    const leftGradientId = `gradient-${leftGroup.replace(/\s+/g, '-').toLowerCase()}`;
+    const leftBaseColor = getColor(leftGroup);
+    
+    const leftGradient = defs.append("linearGradient")
+        .attr("id", leftGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%");
+    
+    leftGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", colorResolver.variant(leftBaseColor, { mode: "darker", amount: 0.7 }));
+    
+    leftGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", colorResolver.variant(leftBaseColor, { mode: "brighter", amount: 1.2 }));
+    
+    const rightGradientId = `gradient-${rightGroup.replace(/\s+/g, '-').toLowerCase()}`;
+    const rightBaseColor = getColor(rightGroup);
+    
+    const rightGradient = defs.append("linearGradient")
+        .attr("id", rightGradientId)
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "0%");
+    
+    rightGradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", colorResolver.variant(rightBaseColor, { mode: "brighter", amount: 1.2 }));
+    
+    rightGradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", colorResolver.variant(rightBaseColor, { mode: "darker", amount: 0.7 }));
+    
+    // ---------- 7. 添加左右组标签 ----------
+    
+    // 图例方块尺寸
+    const legendSquareSize = 12;
+    const legendSpacing = 5;
+    const formattedLeftGroup = groupUnit ? `${leftGroup}${groupUnit}` : `${leftGroup}`;
+    const formattedRightGroup = groupUnit ? `${rightGroup}${groupUnit}` : `${rightGroup}`;
+    const leftTextWidth = chartUtils.text.measure(svg, formattedLeftGroup, {
+        fontSize: 14,
+        fontFamily: typography.label.font_family,
+        fontWeight: "bold",
+    }).width;
+    const leftLegendX = centerX - 50 - leftTextWidth - legendSquareSize - legendSpacing;
+    const rightLegendX = centerX + 50;
+    chartUtils.legend.pair(svg, [
+        { label: formattedLeftGroup, color: getColor(leftGroup), x: leftLegendX, y: margin.top - 35 },
+        { label: formattedRightGroup, color: getColor(rightGroup), x: rightLegendX, y: margin.top - 35 },
+    ], {
+        markerSize: legendSquareSize,
+        labelGap: legendSpacing,
+        fontSize: 14,
+        fontFamily: typography.label.font_family,
+        fontWeight: "bold",
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+    // ---------- 8. 绘制比例尺和中线 ----------
+    
+    // 文字颜色
+    const textColor = colorResolver.text({ fallback: "#333333" }).value;
+    
+    // 中线 - 保持在中点
+    svg.append("line")
+        .attr("x1", margin.left + innerWidth / 2) // 使用绝对中心点
+        .attr("y1", margin.top)
+        .attr("x2", margin.left + innerWidth / 2) // 使用绝对中心点
+        .attr("y2", height - margin.bottom)
+        .attr("stroke", "#CCCCCC")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3,3");
+    
+    // ---------- 9. 设置比例尺 ----------
+    
+    // Y轴比例尺 - 用于不同维度的垂直位置
+    const yScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerHeight])
+        .padding(0.2);  // 条形图之间的间距
+    
+    // 计算棒子尺寸
+    const barHeight = yScale.bandwidth();
+    
+    // 棒子配置
+    const barWidth = 8; // 单个棒子宽度
+    const barSpacing = 3; // 棒子之间的间距
+    
+    // 计算值到棒子的映射函数
+    const valueToBars = (value) => {
+        return Math.min(maxBars, Math.ceil(Math.abs(value) / valuePerBar));
+    };
+    
+    // 中间标签区宽度计算已移至上方
+    
+    // ---------- 10. 绘制主图表组 ----------
+    
+    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";
+    };
+    
+    // 获取填充颜色（考虑渐变）
+    const getLeftFill = () => {
+        return variables.has_gradient ? `url(#${leftGradientId})` : getColor(leftGroup);
+    };
+    
+    const getRightFill = () => {
+        return variables.has_gradient ? `url(#${rightGradientId})` : getColor(rightGroup);
+    };
+    
+    // 为每个维度绘制数据棒子和标签
+    dimensions.forEach((dimension, i) => {
+        const y = yScale(dimension);
+        const barY = y + (barHeight - barHeight * 0.6) / 2; // 垂直居中（高度为60%行高）
+        const finalBarHeight = barHeight * 0.6; // 行高的60%
+        
+        // 找出此维度下的左右两侧数据
+        const leftData = chartData.find(d => d[dimensionField] === dimension && d[groupField] === leftGroup);
+        const rightData = chartData.find(d => d[dimensionField] === dimension && d[groupField] === rightGroup);
+        
+        // 添加维度标签 - 居中显示在图表中心 (基于innerWidth)
+        g.append("text")
+            .attr("x", innerWidth / 2)
+            .attr("y", y + barHeight / 2)
+            .attr("dy", "0.35em")
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", typography.label.font_size)
+            .style("font-weight", typography.label.font_weight)
+            .style("fill", textColor)
+            .text(dimension);
+        
+        // 绘制左侧棒子
+        if (leftData && leftData[valueField] !== undefined) {
+            const value = Math.abs(+leftData[valueField]);
+            const barCount = valueToBars(value);
+            
+            // 计算左侧起始位置，从中间标签区域左侧开始
+            const leftStartX = innerWidth / 2 - centerLabelAreaWidth / 2;
+            
+            // 绘制每个棒子
+            for (let j = 0; j < barCount; j++) {
+                const barX = leftStartX - (j + 1) * (barWidth + barSpacing);
+                
+                g.append("rect")
+                    .attr("x", barX)
+                    .attr("y", barY)
+                    .attr("width", barWidth)
+                    .attr("height", finalBarHeight)
+                    .attr("fill", getLeftFill())
+                    .attr("rx", barWidth / 2)
+                    .attr("ry", barWidth / 2)
+                    .style("stroke", getStrokeColor(getColor(leftGroup)))
+                    .style("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            }
+            
+            // 添加左侧数值标签
+            const formattedValue = valueUnit ? `${chartUtils.format.autoText(value)}${valueUnit}` : `${chartUtils.format.autoText(value)}`;
+            const lastBarX = leftStartX - barCount * (barWidth + barSpacing) - 5;
+            
+            g.append("text")
+                .attr("x", lastBarX)
+                .attr("y", y + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", typography.annotation.font_size)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", textColor)
+                .text(formattedValue);
+        }
+        
+        // 绘制右侧棒子
+        if (rightData && rightData[valueField] !== undefined) {
+            const value = Math.abs(+rightData[valueField]);
+            const barCount = valueToBars(value);
+            
+            // 计算右侧起始位置，从中间标签区域右侧开始
+            const rightStartX = innerWidth / 2 + centerLabelAreaWidth / 2;
+            
+            // 绘制每个棒子
+            for (let j = 0; j < barCount; j++) {
+                const barX = rightStartX + j * (barWidth + barSpacing);
+                
+                g.append("rect")
+                    .attr("x", barX)
+                    .attr("y", barY)
+                    .attr("width", barWidth)
+                    .attr("height", finalBarHeight)
+                    .attr("fill", getRightFill())
+                    .attr("rx", barWidth / 2)
+                    .attr("ry", barWidth / 2)
+                    .style("stroke", getStrokeColor(getColor(rightGroup)))
+                    .style("stroke-width", variables.has_stroke ? 1 : 0)
+                    .style("filter", variables.has_shadow ? "url(#shadow)" : "none");
+            }
+            
+            // 添加右侧数值标签
+            const formattedValue = valueUnit ? `${chartUtils.format.autoText(value)}${valueUnit}` : `${chartUtils.format.autoText(value)}`;
+            const lastBarX = rightStartX + barCount * (barWidth + barSpacing) + 5;
+            
+            g.append("text")
+                .attr("x", lastBarX)
+                .attr("y", y + barHeight / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "start")
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", typography.annotation.font_size)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", textColor)
+                .text(formattedValue);
+        }
+    });
+    
+    // 返回SVG节点
+    return svg.node();
+}