Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type18_vertical_bar_chart_with_ circle/vertical_bar_chart_with_circle_plain_01.js

@@ -0,0 +1,455 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart With Circle",
+    "chart_name": "vertical_bar_chart_with_circle_plain_01",
+    "is_composite": true,
+    "required_fields": ["x", "y", "y2"],
+    "required_fields_type": [
+        ["categorical"],
+        ["numerical"],
+        ["numerical"]
+    ],
+    "required_fields_range": [[2, 12], ["-inf", "inf"], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": ["primary","secondary"],
+    "supported_effects": ["radius_corner", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 垂直条形图与比例圆复合图表实现 - 使用D3.js  vertical_bar_proportional_circle_area_chart_01
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+
+    // 提取数据和配置
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "28px", font_weight: 700 },
+        label: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        description: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: 400 }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#000000",
+        background_color: "#FFFFFF",
+        other: { primary: "#008080", secondary: "#FF0000" }, // 默认颜色: 蓝绿色和红色
+        available_colors: ["#FFBF00"] // 默认: 黄色
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 数值单位规范
+    // 添加数值格式化函数
+
+    // *** 添加: 创建用于文本测量的Canvas Context ***
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    // *** 修改: 提前提取字段名和单位 ***
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key ;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key ;
+    const valueField2 = chartUtils.schema.channel(jsonData, "y2").key ;
+
+    let valueUnit = chartUtils.schema.channel(jsonData, "y").unit === "none" ? "" :
+                      chartUtils.schema.channel(jsonData, "y").unit || ""; // 默认为百分号
+    let valueUnit2 = chartUtils.schema.channel(jsonData, "y2").unit === "none" ? "" :
+                       chartUtils.schema.channel(jsonData, "y2").unit || "";
+
+    // 确保单位是字符串
+    valueUnit = valueUnit || "";
+    valueUnit2 = valueUnit2 || "";
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+
+    // 边距 - 减少底部边距，因为标签上移
+    const margin = { top: 90, right: 50, bottom: 30, left: 50 }; // *** 修改: 减少 bottom ***
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom; // *** 修改: 重新计算 innerHeight ***
+
+    // 定义中间区域的高度 (保持不变或按需调整)
+    const centralBandHeight = innerHeight * 0.20; // 中间区域占20%高度
+    
+    // 上下条形图的总可用高度
+    const barAreaHeight = innerHeight - centralBandHeight; 
+    
+    // 按正负最大值比例分配高度
+    const maxPositiveY = d3.max(chartData, d => Math.max(0, +d[valueField])) || 0;
+    const maxNegativeY = Math.abs(d3.min(chartData, d => Math.min(0, +d[valueField])) || 0);
+    const totalMagnitudeRange = maxPositiveY + maxNegativeY;
+
+    let topBarAreaHeight;
+    let bottomBarAreaHeight;
+
+    if (totalMagnitudeRange > 0) {
+        topBarAreaHeight = barAreaHeight * (maxPositiveY / totalMagnitudeRange);
+        bottomBarAreaHeight = barAreaHeight * (maxNegativeY / totalMagnitudeRange);
+    } else {
+        topBarAreaHeight = barAreaHeight / 2;
+        bottomBarAreaHeight = barAreaHeight / 2;
+    }
+
+    // *** 修改: 重新计算中间区域的 Y 坐标 ***
+    const centralBandTopY = margin.top + topBarAreaHeight;
+    const centralBandBottomY = centralBandTopY + centralBandHeight;
+
+    // 定义图标和标签尺寸 (保持不变)
+    const iconSize = 20;
+    const iconMargin = 3; 
+    const labelMargin = 3; 
+    const circlePadding = 5; 
+
+    const baseFontSizeLabel = parseFloat(typography.label.font_size) || 14;
+    const baseFontSizeAnnotation = parseFloat(typography.annotation.font_size) || 12;
+    const minFontSize = 8;
+
+    // *** 修改: 仅在此处预估中间区域元素 Y 坐标 ***
+    const estDimensionLabelY = centralBandTopY + centralBandHeight * 0.30; 
+    const estCircleY = centralBandTopY + centralBandHeight * 0.70;
+    
+    // ---------- 4. 数据处理 ----------
+
+    // 转换数值类型
+    chartData.forEach(d => {
+        d[valueField] = +d[valueField];
+        d[valueField2] = +d[valueField2];
+    });
+
+    // *** 修改: 按 y 值 (valueField) 降序排序数据 ***
+    chartData.sort((a, b) => +b[valueField] - +a[valueField]);
+
+    // 获取排序后的维度列表
+    const dimensions = chartData.map(d => d[dimensionField]);
+
+    // *** 添加: 获取第一个维度的颜色用于图例 ***
+    let firstDimensionColor = "#888888"; // 默认灰色
+    if (chartData.length > 0) {
+        const firstDimension = chartData[0][dimensionField];
+        firstDimensionColor = colorResolver.field(firstDimension, 0, { fallback: firstDimensionColor }).value;
+    }
+
+    // ---------- 5. 创建比例尺 ----------
+
+    // X轴比例尺 (类别)
+    const xScale = d3.scaleBand()
+        .domain(dimensions)
+        .range([0, innerWidth])
+        .padding(0.2); // 柱子之间的间距
+
+    // *** 修改: 更新 Y 轴比例尺范围以适应中间区域 ***
+    const yScalePositive = d3.scaleLinear()
+        .domain([0, maxPositiveY === 0 ? 1 : maxPositiveY]) 
+        .range([centralBandTopY, margin.top]); // 从中间区域顶部到图表顶部边距
+
+    const yScaleNegative = d3.scaleLinear()
+        .domain([0, maxNegativeY === 0 ? 1 : maxNegativeY]) 
+        .range([centralBandBottomY, height - margin.bottom]); // 从中间区域底部到图表底部边距
+
+    // 圆形面积比例尺 (y2值)
+    const maxValue2 = d3.max(chartData, d => +d[valueField2]) || 0;
+    const minRadius = 2; 
+
+    // *** 修改: 计算精确的中间区域 Y 坐标和最大半径 ***
+    const dimensionLabelY = centralBandTopY + centralBandHeight * 0.30; // 最终维度标签Y
+    const circleY = centralBandTopY + centralBandHeight * 0.70;       // 最终圆圈Y
+    
+    const maxRadiusFromBarWidth = xScale.bandwidth() / 2 * 0.9; 
+    // *** 修改: 使用基础字体大小估算圆圈区域顶部 Y 坐标 ***
+    const actualCircleAreaTopY = dimensionLabelY + baseFontSizeLabel + labelMargin; // 使用 baseFontSizeLabel 进行布局估算
+    const circleAreaHeight = centralBandBottomY - actualCircleAreaTopY; 
+    const maxCircleRadiusAvailableBasedOnHeight = Math.max(0, (circleAreaHeight * 0.9) / 2);
+    const maxCircleRadiusAvailable = Math.min(maxCircleRadiusAvailableBasedOnHeight, maxRadiusFromBarWidth);
+    const maxRadius = Math.max(minRadius, maxCircleRadiusAvailable);
+
+    const radiusScale = d3.scaleSqrt() 
+        .domain([0, maxValue2])
+        .range([minRadius, maxRadius]);
+
+    // *** 添加: 文本换行辅助函数 ***
+    function wrapText(textElement, text, width, x, y, fontSize, fontWeight, fontFamily) {
+        textElement.each(function() {
+            let words = text.split(/\s+/).reverse(),
+                word,
+                line = [],
+                lineNumber = 0,
+                lineHeight = 1.1, // ems
+                tspan = textElement.text(null).append("tspan").attr("x", x).attr("y", y),
+                dy = 0; // Initial dy for first line
+
+            // Estimate width function (simple version)
+            const estimate = (txt) => txt.length * fontSize * 0.6;
+
+            // Check total estimated width first
+            if (measureTextWidth(text, fontSize, fontWeight, fontFamily) <= width) {
+                tspan.text(text);
+                return; // No wrapping needed
+            }
+
+            // Try to wrap (limit to max 2 lines for simplicity here)
+            let lines = [];
+            let currentLine = "";
+            while (word = words.pop()) {
+                line.push(word);
+                currentLine = line.join(" ");
+                if (measureTextWidth(currentLine, fontSize, fontWeight, fontFamily) > width && line.length > 1) {
+                    // Line exceeds width, back up one word
+                    line.pop(); // remove the word that broke the limit
+                    lines.push(line.join(" ")); // Add the previous line
+                    line = [word]; // Start new line with the current word
+                    if (lines.length >= 1) { // Stop after creating the first line break potential
+                        line = [word].concat(words.reverse()); // Put remaining words on the second line
+                        break;
+                    }
+                }
+            }
+            lines.push(line.join(" ")); // Add the last line
+
+            // Render the lines (max 4)
+            lines.slice(0, 4).forEach((lineText, i) => {
+                if (i > 0) dy = lineHeight;
+                tspan = textElement.append("tspan")
+                             .attr("x", x)
+                             .attr("y", y)
+                             .attr("dy", `${dy}em`)
+                             .text(lineText);
+            });
+            // If more than 2 lines would be needed, the second line might truncate
+
+        });
+    }
+
+    // *** 修改: 字体大小计算函数 -> 精确测量 ***
+    function measureTextWidth(text, fontSize, fontWeight, fontFamily) {
+        return chartUtils.text.measure(null, text, { fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }).width;
+    }
+
+    let minDimensionLabelRatio = 1.0;
+    let minCircleLabelRatio = 1.0;
+    let minBarLabelRatio = 1.0;
+
+    const maxDimensionLabelWidth = xScale.bandwidth() * 0.98;
+    const maxCircleLabelWidth = xScale.bandwidth() * 1.03; 
+    const maxBarLabelWidth = xScale.bandwidth();
+
+    // *** 注意: 这里的 finalDimensionFontSize, finalCircleFontSize, finalBarFontSize 
+    //          是在循环之后计算的，但在循环内部以及半径计算中可能需要提前估算或使用基础值。
+    //          当前代码在半径计算中使用了 finalDimensionFontSize || baseFontSizeLabel 
+
+    chartData.forEach(d => {
+        // 维度标签
+        const dimensionText = String(d[dimensionField]); // Ensure string
+        // *** 修改: 使用精确宽度计算 ***
+        let currentWidth = measureTextWidth(dimensionText, baseFontSizeLabel, typography.label.font_weight, typography.label.font_family);
+        if (currentWidth > maxDimensionLabelWidth) {
+            minDimensionLabelRatio = Math.min(minDimensionLabelRatio, maxDimensionLabelWidth / currentWidth);
+        }
+
+        // 圆圈标签
+        const circleText = chartUtils.format.autoText(+d[valueField2]) + valueUnit2; // *** 修改: 单位放在后面 ***
+        currentWidth = measureTextWidth(circleText, baseFontSizeLabel, typography.label.font_weight, typography.label.font_family);
+        // *** 修改: 圆圈标签宽度只受bar宽度限制 ***
+        const effectiveMaxCircleWidth = maxCircleLabelWidth; // Remove constraint from maxAllowedCircleWidth
+        if (currentWidth > effectiveMaxCircleWidth) {
+            minCircleLabelRatio = Math.min(minCircleLabelRatio, effectiveMaxCircleWidth / currentWidth);
+        }
+
+        // 条形图标签
+        const barValue = d[valueField];
+        const barText = (barValue > 0 ? "+" : "") + chartUtils.format.autoText(barValue) + valueUnit;
+        // *** 修改: 使用精确宽度计算 ***
+        currentWidth = measureTextWidth(barText, baseFontSizeAnnotation, typography.annotation.font_weight, typography.annotation.font_family);
+        if (currentWidth > maxBarLabelWidth) {
+            minBarLabelRatio = Math.min(minBarLabelRatio, maxBarLabelWidth / currentWidth);
+        }
+    });
+
+    // 计算最终字体大小 (应用最小比例并限制最小值)
+    const finalDimensionFontSize = Math.max(minFontSize, baseFontSizeLabel * minDimensionLabelRatio);
+    const finalCircleFontSize = Math.max(minFontSize, baseFontSizeLabel * minCircleLabelRatio);
+    const finalBarFontSize = Math.max(minFontSize, baseFontSizeAnnotation * minBarLabelRatio);
+
+    // ---------- 6. 创建SVG容器 ----------
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("preserveAspectRatio", "xMidYMid meet") // 保持宽高比
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    
+
+    // ---------- 7. 创建主图表组 ----------
+
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, 0)`); // Y方向不移动，因为Y坐标已包含margin.top
+    const legendY = margin.top / 2;
+    const legendSquareSize = 12;
+    const legendCircleRadius = 6;
+    const legendPadding = 15;
+    const legendItemPadding = 5;
+    const yName = valueField;
+    const y2Name = valueField2;
+    const legendSymbolColor = firstDimensionColor;
+    chartUtils.legend.mixedCentered(svg, [
+        { markerShape: "rect", markerSize: legendSquareSize, color: legendSymbolColor, label: yName },
+        { markerShape: "circle", markerSize: legendCircleRadius, color: legendSymbolColor, label: y2Name },
+    ], {
+        centerX: margin.left + innerWidth / 2,
+        y: legendY,
+        itemGap: legendPadding,
+        markerTextGap: legendItemPadding,
+        fontSize: parseFloat(typography.annotation.font_size),
+        fontFamily: typography.annotation.font_family,
+        fontWeight: typography.annotation.font_weight,
+        textColor: colorResolver.text({ fallback: "#000000" }).value,
+    });
+
+    // ---------- 9. 绘制图表元素 (循环处理每个数据点) ----------
+
+    chartData.forEach((d, i) => {
+        const x = xScale(d[dimensionField]); // 获取当前类别的X坐标
+        const barWidth = xScale.bandwidth(); // 获取条形的宽度
+        const centerX = x + barWidth / 2; // 当前类别的中心X坐标
+
+        // *** 添加: 确定当前维度的颜色 ***
+        const dimension = d[dimensionField];
+        let dimensionColor = "#888888"; // 默认灰色
+        dimensionColor = colorResolver.field(dimension, 0, { fallback: dimensionColor }).value;
+
+        // 9.1 绘制垂直条形图 (y值)
+        const yValue = d[valueField];
+        let barHeight, barY; 
+
+        // *** 修改: 使用更新后的 yScale 和边界计算高度/位置 ***
+        if (yValue > 0) {
+            barY = yScalePositive(yValue);
+            barHeight = centralBandTopY - barY; // 高度是中间区域顶部到 scale 输出的差值
+        } else if (yValue < 0) {
+            barY = centralBandBottomY; // 负值条从中间区域底部开始
+            const scaledY = yScaleNegative(Math.abs(yValue));
+            barHeight = scaledY - barY; // 高度是 scale 输出和中间区域底部的差值
+        } else {
+            barHeight = 0; 
+            barY = centralBandTopY; 
+        }
+
+        if (barHeight < 0) barHeight = 0; 
+
+        if (barHeight > 0) { // 只有高度大于0才绘制
+            g.append("rect")
+                .attr("x", x)
+                .attr("width", barWidth)
+                .attr("fill", dimensionColor) 
+                .attr("y", barY)
+                .attr("height", barHeight)
+                .attr("rx", 5) 
+                .attr("ry", 5); 
+
+            // 9.2 添加条形图数值标签 (y值)
+            const labelText = (yValue > 0 ? "+" : "") + chartUtils.format.autoText(yValue) + valueUnit;
+            // *** 修改: 标签 Y 坐标逻辑不变，但依赖的 barY/barHeight 已更新 ***
+            const labelY = (yValue >= 0) ? barY - 5 : barY + barHeight + (finalBarFontSize * 0.8); 
+            const textAnchor = "middle";
+
+            g.append("text")
+                .attr("x", centerX)
+                .attr("y", labelY)
+                .attr("text-anchor", textAnchor)
+                .style("font-family", typography.annotation.font_family)
+                .style("font-size", `${finalBarFontSize}px`)
+                .style("font-weight", typography.annotation.font_weight)
+                .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+                .text(labelText);
+                
+            // 图标位置逻辑不变，依赖 labelY
+            if (images.field && images.field[d[dimensionField]]) {
+                const iconTargetY = labelY - (finalBarFontSize * (yValue >= 0 ? 0.7 : 0.1));
+                const iconY = iconTargetY - iconMargin - iconSize;
+                
+                g.append("image")
+                    .attr("x", centerX - iconSize / 2)
+                    .attr("y", iconY)
+                    .attr("width", iconSize)
+                    .attr("height", iconSize)
+                    .attr("xlink:href", images.field[d[dimensionField]])
+                    .attr("preserveAspectRatio","xMidYMid meet");
+            }
+        }
+
+        // 9.3 绘制圆圈 (y2值)
+        const circleRadius = radiusScale(+d[valueField2]);
+
+        g.append("circle")
+            .attr("cx", centerX)
+            .attr("cy", circleY) // *** 修改: 使用新的 circleY ***
+            .attr("r", circleRadius)
+            .attr("fill", dimensionColor) 
+            .attr("opacity", 0.8);
+
+        // 9.4 添加圆圈数值标签 (y2值) - 位置和颜色根据大小调整
+        const circleLabelText = chartUtils.format.autoText(+d[valueField2]) + valueUnit2;
+        const textWidth = measureTextWidth(circleLabelText, finalCircleFontSize, typography.label.font_weight, typography.label.font_family);
+        const isCircleBigEnough = textWidth < (circleRadius * 1.6);
+        let labelColor, labelActualY, labelDy;
+        
+        if (isCircleBigEnough && circleRadius > minFontSize / 2) { 
+            labelColor = "#ffffff"; 
+            labelActualY = circleY; // *** 修改: 内部标签使用新的 circleY ***
+            labelDy = "0.35em";
+        } else {
+            labelColor = colorResolver.text({ fallback: "#000000" }).value;
+            // *** 修改: 外部标签基于新的 circleY 定位 ***
+            labelActualY = circleY + circleRadius + (finalCircleFontSize * 0.6);
+            labelDy = "0em"; 
+        }
+
+        g.append("text")
+            .attr("x", centerX)
+            .attr("y", labelActualY) // *** 修改: 使用计算出的 labelActualY ***
+            .attr("dy", labelDy) 
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", `${finalCircleFontSize}px`)
+            .style("font-weight", typography.label.font_weight)
+            .style("fill", labelColor)
+            .text(circleLabelText);
+
+        // 9.5 添加维度标签 (x值)
+        // 图标已移走
+        g.append("text")
+            .attr("x", centerX)
+            .attr("y", dimensionLabelY) // *** 修改: 使用新的 dimensionLabelY ***
+            .attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family)
+            .style("font-size", `${finalDimensionFontSize}px`) 
+            .style("font-weight", typography.label.font_weight)
+            .style("fill", colorResolver.text({ fallback: "#000000" }).value)
+            .call(wrapText, d[dimensionField], maxDimensionLabelWidth, centerX, dimensionLabelY, finalDimensionFontSize, typography.label.font_weight, typography.label.font_family);
+            
+    }); 
+
+    // ---------- 10. 返回SVG节点 ----------
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type18_vertical_bar_chart_with_ circle/vertical_bar_chart_with_circle_plain_02.js

@@ -0,0 +1,292 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Bar Chart With Circle",
+    "chart_name": "vertical_bar_chart_with_circle_plain_02",
+    "is_composite": true,
+    "required_fields": ["x", "y", "y2"],
+    "required_fields_type": [["categorical"], ["numerical"], ["numerical"]],
+    "required_fields_range": [[2, 12], ["-inf", "inf"], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "side",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+// 垂直条形图与比例圆复合图表实现 - 使用D3.js  vertical_bar_chart_with_circle_plain_02  半圆
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "28px", font_weight: 700 },
+        label: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        description: { font_family: "Arial", font_size: "16px", font_weight: 500 },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: 400 }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#000000",
+        other: { primary: "#008080", secondary: "#FF0000" },
+        available_colors: ["#FFBF00"]
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 创建文本测量Context
+    const context = document.createElement('canvas').getContext('2d');
+
+    // 提取字段名和单位
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key;
+    const valueField = chartUtils.schema.channel(jsonData, "y").key;
+    const valueField2 = chartUtils.schema.channel(jsonData, "y2").key;
+    const valueUnit = chartUtils.schema.channel(jsonData, "y").unit === "none" ? "" : (chartUtils.schema.channel(jsonData, "y").unit || "");
+    const valueUnit2 = chartUtils.schema.channel(jsonData, "y2").unit === "none" ? "" : (chartUtils.schema.channel(jsonData, "y2").unit || "");
+    
+    // 数值格式化函数
+
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+    const width = variables.width || 800;
+    const height = variables.height || 600;
+    const margin = { top: 90, right: 50, bottom: 60, left: 50 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const centralBandHeight = innerHeight * 0.20;
+    const barAreaHeight = innerHeight - centralBandHeight;
+    
+    // 按正负最大值比例分配高度
+    const maxPositiveY = d3.max(chartData, d => Math.max(0, +d[valueField])) || 0;
+    const maxNegativeY = Math.abs(d3.min(chartData, d => Math.min(0, +d[valueField])) || 0);
+    const totalMagnitudeRange = maxPositiveY + maxNegativeY;
+    const topBarAreaHeight = totalMagnitudeRange > 0 ? barAreaHeight * (maxPositiveY / totalMagnitudeRange) : barAreaHeight / 2;
+    const bottomBarAreaHeight = barAreaHeight - topBarAreaHeight;
+
+    // 计算关键Y坐标
+    const centralBandTopY = margin.top + topBarAreaHeight;
+    const centralBandBottomY = centralBandTopY + centralBandHeight;
+
+    // 布局参数
+    const iconSize = 20;
+    const baseFontSizeLabel = parseFloat(typography.label.font_size) || 14;
+    const baseFontSizeAnnotation = parseFloat(typography.annotation.font_size) || 12;
+    const minFontSize = 8;
+
+    // 计算元素Y坐标
+    const iconY = centralBandTopY + 5 + iconSize / 2;
+    const dimensionLabelY = iconY + iconSize / 2 + 3 + baseFontSizeLabel / 2;
+    const circleAreaHeight = centralBandBottomY - (dimensionLabelY + baseFontSizeLabel / 2 + 3) - 5;
+    const maxCircleRadiusAvailable = Math.min((circleAreaHeight * 0.9) / 2, innerWidth / 2);
+
+    // ---------- 3. 数据处理和比例尺 ----------
+    chartData.forEach(d => { d[valueField] = +d[valueField]; d[valueField2] = +d[valueField2]; });
+    chartData.sort((a, b) => +b[valueField] - +a[valueField]);
+    const dimensions = chartData.map(d => d[dimensionField]);
+
+    const xScale = d3.scaleBand().domain(dimensions).range([0, innerWidth]).padding(0.2);
+    const yScalePositive = d3.scaleLinear().domain([0, maxPositiveY || 1]).range([centralBandTopY, centralBandTopY - topBarAreaHeight]);
+    const yScaleNegative = d3.scaleLinear().domain([0, maxNegativeY || 1]).range([centralBandBottomY, centralBandBottomY + bottomBarAreaHeight]);
+    const radiusScale = d3.scaleSqrt().domain([0, d3.max(chartData, d => +d[valueField2]) || 0]).range([2, Math.max(2, maxCircleRadiusAvailable)]);
+
+    // ---------- 4. 辅助函数 ----------
+    // 文本宽度测量
+    const measureTextWidth = (text, fontSize, fontWeight, fontFamily) => {
+        return chartUtils.text.measure(null, text, { fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight }).width;
+    };
+
+    // 文本换行函数
+    function wrapText(textElement, text, width, x, y, fontSize, fontWeight, fontFamily, alignment = 'middle') {
+        textElement.each(function() {
+            const element = d3.select(this);
+            const words = text.split(/\s+/).reverse();
+            const lineHeight = 1.3;
+            
+            element.text(null);
+            let tspans = [];
+
+            if (words.length > 1) {
+                let currentLine = [];
+                let word;
+                while (word = words.pop()) {
+                    currentLine.push(word);
+                    if (measureTextWidth(currentLine.join(" "), fontSize, fontWeight, fontFamily) > width && currentLine.length > 1) {
+                        currentLine.pop();
+                        tspans.push(currentLine.join(" "));
+                        currentLine = [word];
+                    }
+                }
+                if (currentLine.length > 0) tspans.push(currentLine.join(" "));
+            } else {
+                let currentLine = '';
+                for (let char of text.split('')) {
+                    const nextLine = currentLine + char;
+                    if (measureTextWidth(nextLine, fontSize, fontWeight, fontFamily) > width && currentLine.length > 0) {
+                        tspans.push(currentLine);
+                        currentLine = char;
+                    } else {
+                        currentLine = nextLine;
+                    }
+                }
+                if (currentLine.length > 0) tspans.push(currentLine);
+            }
+
+            // 计算对齐偏移
+            const totalLines = tspans.length;
+            let startDy = 0;
+            if (alignment === 'middle') startDy = -((totalLines - 1) * lineHeight / 2);
+            else if (alignment === 'bottom') startDy = -(totalLines * lineHeight - lineHeight);
+
+            tspans.forEach((lineText, i) => {
+                element.append("tspan")
+                    .attr("x", x)
+                    .attr("dy", (i === 0 ? startDy : lineHeight) + "em")
+                    .text(lineText);
+            });
+            
+            element.attr("data-lines", totalLines);
+        });
+    }
+
+    // 计算字体大小
+    let minDimensionLabelRatio = 1.0, minCircleLabelRatio = 1.0, minBarLabelRatio = 1.0;
+    const maxDimensionLabelWidth = xScale.bandwidth() * 0.95;
+    const maxCircleLabelWidth = xScale.bandwidth() * 1.03;
+    const maxBarLabelWidth = xScale.bandwidth();
+
+    chartData.forEach(d => {
+        // 维度标签
+        let currentWidth = measureTextWidth(String(d[dimensionField]), baseFontSizeLabel, typography.label.font_weight, typography.label.font_family);
+        if (currentWidth > maxDimensionLabelWidth) minDimensionLabelRatio = Math.min(minDimensionLabelRatio, maxDimensionLabelWidth / currentWidth);
+
+        // 圆圈标签
+        currentWidth = measureTextWidth(chartUtils.format.scaledText(+d[valueField2]) + (valueUnit2 ? ` ${valueUnit2}` : ''), baseFontSizeLabel, typography.label.font_weight, typography.label.font_family);
+        if (currentWidth > maxCircleLabelWidth) minCircleLabelRatio = Math.min(minCircleLabelRatio, maxCircleLabelWidth / currentWidth);
+
+        // 条形图标签
+        currentWidth = measureTextWidth((+d[valueField] > 0 ? "+" : "") + chartUtils.format.scaledText(+d[valueField]) + (valueUnit ? ` ${valueUnit}` : ''), baseFontSizeAnnotation, typography.annotation.font_weight, typography.annotation.font_family);
+        if (currentWidth > maxBarLabelWidth) minBarLabelRatio = Math.min(minBarLabelRatio, maxBarLabelWidth / currentWidth);
+    });
+
+    const finalDimensionFontSize = Math.max(minFontSize, baseFontSizeLabel * minDimensionLabelRatio);
+    const finalCircleFontSize = Math.max(minFontSize, baseFontSizeLabel * minCircleLabelRatio);
+    const finalBarFontSize = Math.max(minFontSize, baseFontSizeAnnotation * minBarLabelRatio);
+
+    // ---------- 5. 创建SVG容器 ----------
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+
+    const g = svg.append("g").attr("transform", `translate(${margin.left}, 0)`);
+
+    // ---------- 6. 添加图例 ----------
+    const positiveColor = colorResolver.other("primary", { fallback: "#008080" }).value;
+    const negativeColor = colorResolver.other("secondary", { fallback: "#FF0000" }).value;
+    const circleLegendColor = colorResolver.available(0, { fallback: "#FFBF00" }).value;
+    const legendY = margin.top - 30;
+    chartUtils.legend.segmentsCentered(svg, [
+        { type: "rect", size: 12, color: positiveColor },
+        { type: "rect", size: 12, color: negativeColor },
+        { type: "text", label: valueField },
+        { type: "circle", size: 12, radius: 6, color: circleLegendColor },
+        { type: "text", label: valueField2 },
+    ], {
+        centerX: margin.left + innerWidth / 2,
+        y: legendY,
+        itemGap: 5,
+        sectionGap: 5,
+        fontSize: 12,
+        fontFamily: typography.annotation.font_family,
+        textColor: colorResolver.text({ fallback: "#333333" }).value,
+    });
+    // ---------- 7. 绘制图表元素 ----------
+    // 计算维度标签最大高度
+    let maxLabelHeight = 0;
+    const dimensionLabels = chartData.map((d, i) => {
+        const tempText = g.append("text").style("visibility", "hidden")
+            .call(wrapText, d[dimensionField], maxDimensionLabelWidth, 0, 0, finalDimensionFontSize, typography.label.font_weight, typography.label.font_family, 'top');
+        const lineCount = parseInt(tempText.attr("data-lines") || "1");
+        const height = lineCount * finalDimensionFontSize * 1.3;
+        maxLabelHeight = Math.max(maxLabelHeight, height);
+        tempText.remove();
+        return { lineCount, height };
+    });
+    
+    const uniformCircleY = dimensionLabelY + maxLabelHeight + 10;
+    
+    // 绘制所有元素
+    chartData.forEach((d, i) => {
+        const x = xScale(d[dimensionField]);
+        const barWidth = xScale.bandwidth();
+        const centerX = x + barWidth / 2;
+        const yValue = d[valueField];
+
+        // 绘制条形图
+        if (yValue !== 0) {
+            let barY, barHeight, barColor;
+            if (yValue > 0) {
+                barY = yScalePositive(yValue);
+                barHeight = centralBandTopY - barY;
+                barColor = colorResolver.other("primary", { fallback: "#008080" }).value;
+            } else {
+                barY = centralBandBottomY;
+                barHeight = yScaleNegative(Math.abs(yValue)) - barY;
+                barColor = colorResolver.other("secondary", { fallback: "#FF0000" }).value;
+            }
+
+            if (barHeight > 0) {
+                g.append("rect").attr("class", "mark").attr("x", x).attr("width", barWidth).attr("fill", barColor)
+                    .attr("y", barY).attr("height", barHeight).attr("rx", barWidth / 2).attr("ry", barWidth / 2);
+
+                // 条形数值标签
+                const labelText = (yValue > 0 ? "+" : "") + chartUtils.format.scaledText(yValue) + (valueUnit ? ` ${valueUnit}` : '');
+                const labelY = yValue >= 0 ? barY - 5 : barY + barHeight + finalBarFontSize * 0.8;
+                g.append("text").attr("class", "value").attr("x", centerX).attr("y", labelY).attr("text-anchor", "middle")
+                    .style("font-family", typography.annotation.font_family).style("font-size", `${finalBarFontSize}px`)
+                    .style("font-weight", typography.annotation.font_weight).style("fill", colorResolver.text({ fallback: "#000000" }).value).text(labelText);
+            }
+        }
+
+        // 维度标签
+        g.append("text").attr("class", "label").attr("x", centerX).attr("y", dimensionLabelY).attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family).style("font-size", `${finalDimensionFontSize}px`)
+            .style("font-weight", typography.label.font_weight).style("fill", colorResolver.text({ fallback: "#000000" }).value)
+            .call(wrapText, d[dimensionField], maxDimensionLabelWidth, centerX, dimensionLabelY, finalDimensionFontSize, typography.label.font_weight, typography.label.font_family, 'top');
+        
+        // 圆圈
+        const circleRadius = radiusScale(+d[valueField2]);
+        g.append("circle").attr("class", "mark").attr("cx", centerX).attr("cy", uniformCircleY).attr("r", circleRadius)
+            .attr("fill", colorResolver.available(0, { fallback: "#FFBF00" }).value).attr("opacity", 0.8);
+
+        // 圆圈数值标签
+        const circleLabelText = chartUtils.format.scaledText(+d[valueField2]) + (valueUnit2 ? ` ${valueUnit2}` : '');
+        g.append("text").attr("class", "value").attr("x", centerX).attr("y", uniformCircleY).attr("dy", "0.35em").attr("text-anchor", "middle")
+            .style("font-family", typography.label.font_family).style("font-size", `${finalCircleFontSize}px`)
+            .style("font-weight", typography.label.font_weight).style("fill", colorResolver.text({ fallback: "#000000" }).value).text(circleLabelText);
+
+        // 图标
+        if (images.field && images.field[d[dimensionField]]) {
+            g.append("image").attr("class", "image").attr("x", centerX - iconSize / 2).attr("y", iconY - iconSize / 2)
+                .attr("width", iconSize).attr("height", iconSize).attr("xlink:href", images.field[d[dimensionField]]).attr("preserveAspectRatio", "xMidYMid meet");
+        }
+    });
+
+    return svg.node();
+}