Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/pyramid_funnel/funnel_chart_01.js

@@ -0,0 +1,139 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Funnel Chart",
+    "chart_name": "funnel_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从大到小排序数据（大的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+    });
+    let max_percent = 0;
+    let min_percent = 100;
+    sortedData.forEach(d => {
+        max_percent = Math.max(max_percent, d.percent);
+        min_percent = Math.min(min_percent, d.percent);
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算漏斗图的最大宽度和高度
+    const maxFunnelWidth = chartWidth * 0.8;
+    const funnelHeight = chartHeight * 0.8;
+    
+    // 计算每个部分的高度（均等分配）
+    const sectionHeight = funnelHeight / sortedData.length;
+    
+    // 创建宽度比例尺
+    const widthScale = d3.scaleLinear()
+        .domain([0, max_percent])
+        .range([0, maxFunnelWidth]);
+    
+    // 计算每个部分的宽度
+    const sectionWidths = sortedData.map(d => widthScale(d.percent));
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - funnelHeight) / 2;
+    
+    // 绘制漏斗图的每一层
+    sortedData.forEach((d, i) => {
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 计算当前层的宽度
+        const topWidth = sectionWidths[i];
+        
+        // 计算下一层的宽度（如果是最后一层，则使用当前宽度的80%）
+        const bottomWidth = i < sortedData.length - 1 
+            ? sectionWidths[i + 1] 
+            : topWidth * 0.8;
+        
+        // 计算当前层的位置
+        const sectionY = i * sectionHeight + verticalOffset;
+        
+        // 绘制梯形
+        const points = [
+            [chartWidth / 2 - topWidth / 2, sectionY],
+            [chartWidth / 2 + topWidth / 2, sectionY],
+            [chartWidth / 2 + bottomWidth / 2, sectionY + sectionHeight],
+            [chartWidth / 2 - bottomWidth / 2, sectionY + sectionHeight]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", chartWidth / 2 + topWidth / 2 + 10)
+            .attr("y", sectionY + sectionHeight / 2)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .text(`${d[categoryField]} ${chartUtils.format.percent(d.percent, { digits: 0 }).text}`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/funnel_chart_02.js

@@ -0,0 +1,135 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Funnel Chart",
+    "chart_name": "funnel_chart_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从大到小排序数据（大的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算漏斗图的最大宽度和高度
+    const maxFunnelWidth = chartWidth * 0.8;
+    const funnelHeight = chartHeight * 0.8;
+    
+    // 计算每个部分的高度（均等分配）
+    const sectionHeight = funnelHeight / sortedData.length;
+    
+    // 创建宽度比例尺
+    const widthScale = d3.scaleLinear()
+        .domain([0, 100])
+        .range([0, maxFunnelWidth]);
+    
+    // 计算每个部分的宽度
+    const sectionWidths = sortedData.map(d => widthScale(d.percent));
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - funnelHeight) / 2;
+
+    const y_padding = 5;
+    
+    // 绘制漏斗图的每一层
+    sortedData.forEach((d, i) => {
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 计算当前层的宽度
+        const topWidth = sectionWidths[i];
+        
+        // 计算下一层的宽度（如果是最后一层，则使用当前宽度的80%）
+        const bottomWidth = i < sortedData.length - 1 
+            ? sectionWidths[i + 1] 
+            : topWidth * 0.8;
+        
+        // 计算当前层的位置
+        const sectionY = i * sectionHeight + verticalOffset;
+        
+        // 绘制梯形
+        const points = [
+            [chartWidth / 2 - topWidth / 2, sectionY + y_padding * i],
+            [chartWidth / 2 + topWidth / 2, sectionY + y_padding * i],
+            [chartWidth / 2 + bottomWidth / 2, sectionY + sectionHeight + y_padding * i],
+            [chartWidth / 2 - bottomWidth / 2, sectionY + sectionHeight + y_padding * i]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", chartWidth / 2 + topWidth / 2 + 10)
+            .attr("y", sectionY + sectionHeight / 2 + y_padding * i)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .text(`${d[categoryField]} ${chartUtils.format.percent(d.percent, { digits: 0 }).text}`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_chart_01.js

@@ -0,0 +1,172 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Chart",
+    "chart_name": "pyramid_chart_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10;
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .text(`${d[categoryField]} ${chartUtils.format.percent(d.percent, { digits: 0 }).text}`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_chart_01_dark.js

@@ -0,0 +1,176 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Chart",
+    "chart_name": "pyramid_chart_01_dark",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || { 
+        text_color: "#000000", 
+        other: { primary: "#4682B4", secondary: "#FF7F50" } 
+    }; 
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10;
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "#FFFFFF")
+            .text(`${d[categoryField]} ${chartUtils.format.percent(d.percent, { digits: 0 }).text}`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_chart_02.js

@@ -0,0 +1,174 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Chart",
+    "chart_name": "pyramid_chart_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+
+    const y_padding = 5;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset + y_padding * i],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset + y_padding * i],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset + y_padding * i],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset + y_padding * i]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset + y_padding * i;
+        const labelX = chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10;
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .text(`${d[categoryField]} ${chartUtils.format.percent(d.percent, { digits: 0 }).text}`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_chart_03.js

@@ -0,0 +1,313 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Chart",
+    "chart_name": "pyramid_chart_03",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const initialChartHeightForLegend = height - margin.top - margin.bottom;
+
+    // ---------- 图例逻辑 (借鉴 Voronoi Treemap / function_modules.js) ----------
+    const uniqueCategories = [...new Set(sortedData.map(d => d[categoryField]))];
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    function getTextWidthHelper(text, fontFamily, fontSize, fontWeight) {
+        ctx.font = `${fontWeight || 'normal'} ${fontSize}px ${fontFamily || 'Arial'}`;
+        return chartUtils.text.contextWidth(ctx, text);
+    }
+
+    let legendBlockHeight = 0;
+    const legendLines = [];
+    const paddingBelowLegendToChart = 20; // 图例和金字塔之间的间距增加
+    const minSvgGlobalTopPadding = 15; 
+    let legendItemMaxHeight = 0; 
+    let interLineVerticalPadding = parseFloat(typography.label?.line_spacing || '6'); 
+    let legendInterItemSpacing = 10; 
+
+    // 获取颜色函数，与后续金字塔层颜色逻辑保持一致
+    const getColorForLegend = (category, index) => {
+        return colorResolver.field(category, index, { palette: "category10" }).value;
+    };
+
+    if (uniqueCategories && uniqueCategories.length > 0) { 
+        const legendColorRectWidth = 12;
+        const legendColorRectHeight = 12;
+        const legendIconWidth = typography.label?.icon_size || 16; 
+        const legendIconHeight = typography.label?.icon_size || 16;
+        const legendPaddingRectIcon = 4; 
+        const legendPaddingIconText = 4; 
+        
+        const legendFontFamily = typography.label?.font_family || 'Arial';
+        const legendFontSize = parseFloat(typography.label?.font_size || '12');
+        const legendFontWeight = typography.label?.font_weight || 'normal';
+
+        legendItemMaxHeight = Math.max(legendColorRectHeight, legendIconHeight, legendFontSize);
+
+        const legendItemsData = uniqueCategories.map((catName, index) => {
+            const text = String(catName);
+            const color = getColorForLegend(catName, sortedData.findIndex(d => d[categoryField] === catName)); // 确保颜色与金字塔层一致
+            const iconUrl = images.field && images.field[catName] ? images.field[catName] : null;
+            const textWidth = getTextWidthHelper(text, legendFontFamily, legendFontSize, legendFontWeight);
+            
+            let itemVisualWidth = legendColorRectWidth;
+            if (iconUrl) {
+                itemVisualWidth += legendPaddingRectIcon + legendIconWidth + legendPaddingIconText;
+            } else {
+                itemVisualWidth += legendPaddingRectIcon; // 如果没有图标，颜色块和文本之间仍有间距
+            }
+            itemVisualWidth += textWidth;
+            return { text, color, iconUrl, textWidth, visualWidth: itemVisualWidth };
+        });
+
+        const legendLayout = chartUtils.legend.wrapItems(
+            legendItemsData.map(item => ({ ...item, width: item.visualWidth, height: legendItemMaxHeight })),
+            {
+                maxWidth: chartWidth,
+                itemGap: legendInterItemSpacing,
+                rowGap: interLineVerticalPadding,
+                itemHeight: legendItemMaxHeight,
+            }
+        );
+        legendLines.push(...legendLayout.rows.map(row => ({
+            items: row.items,
+            totalVisualWidth: row.width,
+        })));
+        legendBlockHeight = legendLayout.height;
+    }
+
+    let effectiveMarginTop = margin.top;
+    let legendStartY = minSvgGlobalTopPadding;
+
+    if (legendBlockHeight > 0) {
+        legendStartY = Math.max(minSvgGlobalTopPadding, margin.top); // 确保图例从至少 margin.top 或 minPadding 开始
+        effectiveMarginTop = legendStartY + legendBlockHeight + paddingBelowLegendToChart;
+    } else {
+        effectiveMarginTop = Math.max(margin.top, minSvgGlobalTopPadding);
+    }
+    
+    // 实际用于金字塔绘制的 chartHeight
+    const chartHeight = height - effectiveMarginTop - margin.bottom;
+
+    // 创建图表区域 (g)，使用新的 effectiveMarginTop
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${effectiveMarginTop})`);
+
+    // ---------- 绘制图例 (如果存在) ----------
+    if (legendBlockHeight > 0 && legendLines.length > 0) {
+        const legendContainerGroup = svg.append("g") // 注意：图例容器直接附加到svg，其Y坐标由legendStartY决定
+            .attr("class", "custom-legend-container")
+            .attr("transform", `translate(0, ${legendStartY})`);
+
+        let currentLineBaseY = 0; 
+        const currentLegendInterItemSpacing = legendInterItemSpacing;
+
+        legendLines.forEach((line) => {
+            const lineRenderStartX = margin.left + (chartWidth - line.totalVisualWidth) / 2; // 水平居中于chartWidth区域
+            const lineCenterY = currentLineBaseY + legendItemMaxHeight / 2;
+            let currentItemDrawX = lineRenderStartX;
+            
+            const legendColorRectWidth = 12; 
+            const legendColorRectHeight = 12;
+            const legendIconWidth = typography.label?.icon_size || 16;
+            const legendIconHeight = typography.label?.icon_size || 16;
+            const legendPaddingRectIcon = 4;
+            const legendPaddingIconText = 4;
+            const legendFontFamily = typography.label?.font_family || 'Arial';
+            const legendFontSize = parseFloat(typography.label?.font_size || '12');
+            const legendFontWeight = typography.label?.font_weight || 'normal';
+
+            line.items.forEach((item, itemIndex) => {
+                legendContainerGroup.append("rect")
+                    .attr("x", currentItemDrawX)
+                    .attr("y", currentLineBaseY + (legendItemMaxHeight - legendColorRectHeight) / 2)
+                    .attr("width", legendColorRectWidth).attr("height", legendColorRectHeight)
+                    .attr("rx", 3).attr("ry", 3) // 圆角矩形
+                    .attr("fill", item.color).attr("fill-opacity", 0.85);
+                currentItemDrawX += legendColorRectWidth;
+                if (item.iconUrl) {
+                    currentItemDrawX += legendPaddingRectIcon;
+                    legendContainerGroup.append("image").attr("xlink:href", item.iconUrl)
+                        .attr("x", currentItemDrawX)
+                        .attr("y", currentLineBaseY + (legendItemMaxHeight - legendIconHeight) / 2)
+                        .attr("width", legendIconWidth).attr("height", legendIconHeight)
+                        .attr("preserveAspectRatio", "xMidYMid meet");
+                    currentItemDrawX += legendIconWidth + legendPaddingIconText;
+                } else {
+                    currentItemDrawX += legendPaddingRectIcon; 
+                }
+                legendContainerGroup.append("text").attr("x", currentItemDrawX).attr("y", lineCenterY)
+                    .attr("dominant-baseline", "middle")
+                    .style("font-family", legendFontFamily).style("font-size", `${legendFontSize}px`)
+                    .style("font-weight", legendFontWeight).style("fill", colorResolver.text({ fallback: "#333333" }).value || typography.label?.font_color || "#333333")
+                    .text(item.text);
+                currentItemDrawX += item.textWidth; 
+                if (itemIndex < line.items.length - 1) {
+                     currentItemDrawX += (line.items[itemIndex+1].visualWidth > 0 ? (currentLegendInterItemSpacing || 10) : 0) ;
+                }
+            });
+            currentLineBaseY += legendItemMaxHeight + interLineVerticalPadding;
+        });
+    }
+
+    // 计算金字塔的最大宽度（底部）和高度，使用调整后的 chartHeight
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.8; // 使用 chartHeight 的80%，给上下留些空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色 (与图例逻辑中的 getColorForLegend 对应)
+        const color = getColorForLegend(d[categoryField], i); // 使用 i (排序后的索引) 作为后备
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10;
+        
+        // 修改标签为只显示百分比
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", typography.label?.font_size || "12px") // 使用label字号
+            .attr("font-weight", typography.label?.font_weight || "normal")
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value || typography.label?.font_color || "#333333")
+            .text(chartUtils.format.percent(d.percent, { digits: 0 }).text);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_01.js

@@ -0,0 +1,187 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_01",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // ��取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2;
+
+        const textWidth = chartUtils.text.measure(null, d[categoryField], { fontSize: 14 }).width + 20;
+        if (textWidth > (section.topWidth + section.bottomWidth) / 2) {
+            // 添加一个暗色透明背景
+            g.append("rect")
+                .attr("x", labelX - textWidth / 2)
+                .attr("y", labelY - 15)
+                .attr("width", textWidth)
+                .attr("height", 30)
+                .attr("fill", "rgba(0, 0, 0, 0.3)")
+                .attr("rx", 5)
+                .attr("ry", 5);
+        }
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(chartUtils.format.category(d[categoryField]).text);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_01_3d.js

@@ -0,0 +1,292 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_01_3d",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从大到小排序数据（大的在底部）
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 160 }; // 增加左侧边距
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 添加渐变和阴影定义
+    const defs = svg.append("defs");
+    
+    // 添加阴影滤镜
+    const filter = defs.append("filter")
+        .attr("id", "shadow")
+        .attr("x", "-50%")
+        .attr("y", "-50%")
+        .attr("width", "200%")
+        .attr("height", "200%");
+    
+    filter.append("feOffset")
+        .attr("result", "offOut")
+        .attr("in", "SourceGraphic")
+        .attr("dx", 5)
+        .attr("dy", 5);
+    
+    filter.append("feGaussianBlur")
+        .attr("result", "blurOut")
+        .attr("in", "offOut")
+        .attr("stdDeviation", 3);
+    
+    filter.append("feBlend")
+        .attr("in", "SourceGraphic")
+        .attr("in2", "blurOut")
+        .attr("mode", "normal");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.8; // 使用80%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    // 计算所有部分的总高度，使高度与数据成正比
+    const totalValue = d3.sum(sortedData, d => +d[valueField]);
+    const totalHeight = pyramidHeight;
+    
+    sortedData.forEach((d, i) => {
+        // 根据数值在总和中的比例计算高度
+        const heightRatio = +d[valueField] / totalValue;
+        const sectionHeight = heightRatio * totalHeight;
+        
+        // 计算该部分在金字塔中的位置
+        const bottomY = currentHeight;
+        const topY = currentHeight + sectionHeight;
+        
+        // 根据当前高度位置计算宽度（线性变化）
+        const bottomPosition = bottomY / totalHeight;
+        const topPosition = topY / totalHeight;
+        
+        // 底部宽度大，顶部宽度小
+        const bottomWidth = maxPyramidWidth * (1 - bottomPosition);
+        const topWidth = maxPyramidWidth * (1 - topPosition);
+        
+        sections.push({
+            data: d,
+            bottomY: bottomY,
+            topY: topY,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += sectionHeight;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的左侧标签
+    sections.forEach((section, i) => {
+        const d = section.data;
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        
+        // 添加左侧的类别标签（x标签）
+        g.append("text")
+            .attr("x", -20) // 位于图形左侧
+            .attr("y", labelY)
+            .attr("text-anchor", "end") // 右对齐
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "#333")
+            .text(`${d[categoryField]}`);
+            
+        // 添加连接线
+        g.append("line")
+            .attr("x1", -15)
+            .attr("y1", labelY)
+            .attr("x2", chartWidth / 2 - section.bottomWidth / 2 - 5)
+            .attr("y2", labelY)
+            .attr("stroke", "#999")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,3");
+    });
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const baseColor = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+            
+        // 为3D效果创建较深的颜色
+        const darkerColor = colorResolver.variant(baseColor, { mode: "darker", amount: 0.8 });
+        
+        // 为每个截面创建渐变
+        const gradientId = `gradient-${i}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+            
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", darkerColor.toString());
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", baseColor);
+        
+        // 绘制主梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        // 主体部分
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", `url(#${gradientId})`)
+            .attr("filter", "url(#shadow)");
+            
+        // 判断是否为底部三角形（最后一个元素，索引为0）
+        const isBottom = (i === 0);
+        
+        // 右侧面（3D效果）- 对底部三角形特殊处理
+        let sidePoints;
+        
+        if (isBottom) {
+            // 底部三角形的侧面不应超出底部
+            sidePoints = [
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset]
+            ];
+        } else {
+            // 其他层的侧面正常绘制
+            sidePoints = [
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2 + 15, section.bottomY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset]
+            ];
+        }
+        
+        g.append("polygon")
+            .attr("points", sidePoints.map(p => p.join(",")).join(" "))
+            .attr("fill", darkerColor.toString());
+            
+        // 仅为最顶部的部分添加顶面
+        if (i === sections.length - 1) {
+            // 顶部面（仅最顶层部分）
+            const topPoints = [
+                [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 - section.topWidth / 2 + 15, section.topY + verticalOffset + 10]
+            ];
+            
+            g.append("polygon")
+                .attr("points", topPoints.map(p => p.join(",")).join(" "))
+                .attr("fill", chartUtils.color.variant(darkerColor, { mode: "brighter", amount: 0.5 }));
+        }
+    });
+    
+    // 在梯形内部添加数据标签
+    sections.forEach((section, i) => {
+        const d = section.data;
+        const centerY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const centerX = chartWidth / 2;
+        
+        // 计算该部分占比的百分比文本
+        const percentText = `${chartUtils.format.autoText(+d[valueField])} (${chartUtils.format.percent(d.percent).text})`;
+        
+        // 添加数值和百分比标签
+        g.append("text")
+            .attr("x", centerX)
+            .attr("y", centerY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(percentText);
+    });
+    
+    // 辅助函数：估算文本宽度
+    function measureTextWidth(text, fontSize) {
+        return chartUtils.text.estimate(text, { fontSize: fontSize, factor: 0.6 }).width;
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_01_3d_dark.js

@@ -0,0 +1,295 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_01_3d_dark",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || { 
+        text_color: "#000000", 
+        other: { primary: "#4682B4", secondary: "#FF7F50" } 
+    }; 
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从大到小排序数据（大的在底部）
+    const sortedData = [...chartData].sort((a, b) => +b[valueField] - +a[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 160 }; // 增加左侧边距
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 添加渐变和阴影定义
+    const defs = svg.append("defs");
+    
+    // 添加阴影滤镜
+    const filter = defs.append("filter")
+        .attr("id", "shadow")
+        .attr("x", "-50%")
+        .attr("y", "-50%")
+        .attr("width", "200%")
+        .attr("height", "200%");
+    
+    filter.append("feOffset")
+        .attr("result", "offOut")
+        .attr("in", "SourceGraphic")
+        .attr("dx", 5)
+        .attr("dy", 5);
+    
+    filter.append("feGaussianBlur")
+        .attr("result", "blurOut")
+        .attr("in", "offOut")
+        .attr("stdDeviation", 3);
+    
+    filter.append("feBlend")
+        .attr("in", "SourceGraphic")
+        .attr("in2", "blurOut")
+        .attr("mode", "normal");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.8; // 使用80%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    // 计算所有部分的总高度，使高度与数据成正比
+    const totalValue = d3.sum(sortedData, d => +d[valueField]);
+    const totalHeight = pyramidHeight;
+    
+    sortedData.forEach((d, i) => {
+        // 根据数值在总和中的比例计算高度
+        const heightRatio = +d[valueField] / totalValue;
+        const sectionHeight = heightRatio * totalHeight;
+        
+        // 计算该部分在金字塔中的位置
+        const bottomY = currentHeight;
+        const topY = currentHeight + sectionHeight;
+        
+        // 根据当前高度位置计算宽度（线性变化）
+        const bottomPosition = bottomY / totalHeight;
+        const topPosition = topY / totalHeight;
+        
+        // 底部宽度大，顶部宽度小
+        const bottomWidth = maxPyramidWidth * (1 - bottomPosition);
+        const topWidth = maxPyramidWidth * (1 - topPosition);
+        
+        sections.push({
+            data: d,
+            bottomY: bottomY,
+            topY: topY,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += sectionHeight;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的左侧标签
+    sections.forEach((section, i) => {
+        const d = section.data;
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        
+        // 添加左侧的类别标签（x标签）
+        g.append("text")
+            .attr("x", -20) // 位于图形左侧
+            .attr("y", labelY)
+            .attr("text-anchor", "end") // 右对齐
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "#ffffff")
+            .text(`${d[categoryField]}`);
+            
+        // 添加连接线
+        g.append("line")
+            .attr("x1", -15)
+            .attr("y1", labelY)
+            .attr("x2", chartWidth / 2 - section.bottomWidth / 2 - 5)
+            .attr("y2", labelY)
+            .attr("stroke", "#999")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,3");
+    });
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const baseColor = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+            
+        // 为3D效果创建较深的颜色
+        const darkerColor = colorResolver.variant(baseColor, { mode: "darker", amount: 0.8 });
+        
+        // 为每个截面创建渐变
+        const gradientId = `gradient-${i}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+            
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", darkerColor.toString());
+            
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", baseColor);
+        
+        // 绘制主梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        // 主体部分
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", `url(#${gradientId})`)
+            .attr("filter", "url(#shadow)");
+            
+        // 判断是否为底部三角形（最后一个元素，索引为0）
+        const isBottom = (i === 0);
+        
+        // 右侧面（3D效果）- 对底部三角形特殊处理
+        let sidePoints;
+        
+        if (isBottom) {
+            // 底部三角形的侧面不应超出底部
+            sidePoints = [
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset]
+            ];
+        } else {
+            // 其他层的侧面正常绘制
+            sidePoints = [
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2 + 15, section.bottomY + verticalOffset + 10],
+                [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset]
+            ];
+        }
+        
+        g.append("polygon")
+            .attr("points", sidePoints.map(p => p.join(",")).join(" "))
+            .attr("fill", darkerColor.toString());
+            
+        // 仅为最顶部的部分添加顶面
+        if (i === sections.length - 1) {
+            // 顶部面（仅最顶层部分）
+            const topPoints = [
+                [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+                [chartWidth / 2 + section.topWidth / 2 + 15, section.topY + verticalOffset + 10],
+                [chartWidth / 2 - section.topWidth / 2 + 15, section.topY + verticalOffset + 10]
+            ];
+            
+            g.append("polygon")
+                .attr("points", topPoints.map(p => p.join(",")).join(" "))
+                .attr("fill", chartUtils.color.variant(darkerColor, { mode: "brighter", amount: 0.5 }));
+        }
+    });
+    
+    // 在梯形内部添加数据标签
+    sections.forEach((section, i) => {
+        const d = section.data;
+        const centerY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const centerX = chartWidth / 2;
+        
+        // 计算该部分占比的百分比文本
+        const percentText = `${chartUtils.format.autoText(+d[valueField])} (${chartUtils.format.percent(d.percent).text})`;
+        
+        // 添加数值和百分比标签
+        g.append("text")
+            .attr("x", centerX)
+            .attr("y", centerY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(percentText);
+    });
+    
+    // 辅助函数：估算文本宽度
+    function measureTextWidth(text, fontSize) {
+        return chartUtils.text.estimate(text, { fontSize: fontSize, factor: 0.6 }).width;
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_01_hand.js

@@ -0,0 +1,207 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_01_hand",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2;
+        
+        // 数据标签位置（在金字塔中心）
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(`${chartUtils.format.autoText(+d[valueField])}`);
+            
+        // 类别标签（在左侧）
+        g.append("text")
+            .attr("x", chartWidth / 2 - Math.max(section.topWidth, section.bottomWidth) / 2 - 10)
+            .attr("y", labelY)
+            .attr("text-anchor", "end")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", colorResolver.field(d[categoryField], i, { palette: "category10" }).value)
+            .text(`${d[categoryField]}`);
+    });
+    
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "hachure";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_02.js

@@ -0,0 +1,240 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 创建金属光泽的渐变定义
+    const defs = svg.append("defs");
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+            
+        // 为每个部分创建金属光泽渐变
+        const gradientId = `metallic-gradient-${i}`;
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "100%");
+            
+        // 解析颜色以创建金属效果
+        const baseColor = d3.rgb(color);
+        const lighterColor = d3.rgb(
+            Math.min(255, baseColor.r + 60),
+            Math.min(255, baseColor.g + 60),
+            Math.min(255, baseColor.b + 60)
+        );
+        const darkerColor = d3.rgb(
+            Math.max(0, baseColor.r - 30),
+            Math.max(0, baseColor.g - 30),
+            Math.max(0, baseColor.b - 30)
+        );
+        
+        // 添加渐变停止点来创建金属效果
+        gradient.append("stop")
+            .attr("offset", "0%")
+            .attr("stop-color", lighterColor.toString());
+        gradient.append("stop")
+            .attr("offset", "30%")
+            .attr("stop-color", color);
+        gradient.append("stop")
+            .attr("offset", "70%")
+            .attr("stop-color", color);
+        gradient.append("stop")
+            .attr("offset", "100%")
+            .attr("stop-color", darkerColor.toString());
+
+        const y_padding = 5;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset + y_padding * i],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset + y_padding * i],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset + y_padding * i],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset + y_padding * i]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", `url(#${gradientId})`)
+            .attr("stroke", darkerColor.toString())
+            .attr("stroke-width", 0.5);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset + y_padding * i;
+        const labelX = chartWidth / 2;
+
+        const textWidth = chartUtils.text.measure(null, d[categoryField], { fontSize: 14 }).width + 20;
+        if (textWidth > (section.topWidth + section.bottomWidth) / 2) {
+            // 添加一个暗色透明背景
+            g.append("rect")
+                .attr("x", labelX - textWidth / 2)
+                .attr("y", labelY - 15)
+                .attr("width", textWidth)
+                .attr("height", 30)
+                .attr("fill", "rgba(0, 0, 0, 0.3)")
+                .attr("rx", 5)
+                .attr("ry", 5);
+        }
+        
+        // 添加标签
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(`${d[categoryField]}`);
+            
+        // 添加数值标签
+        g.append("text")
+            .attr("x", chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10)
+            .attr("y", labelY)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "12px")
+            .attr("font-weight", "bold")
+            .text(`${chartUtils.format.autoText(+d[valueField])} (${chartUtils.format.percent(d.percent).text})`);
+    });
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/pyramid_funnel/pyramid_diagram_02_hand.js

@@ -0,0 +1,207 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Pyramid Diagram",
+    "chart_name": "pyramid_diagram_02_hand",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[3, 10], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["x"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "dark",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors_dark || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    
+    // 按值从小到大排序数据（小的在顶部）
+    const sortedData = [...chartData].sort((a, b) => +a[valueField] - +b[valueField]);
+    
+    // 计算总和以获取百分比
+    const total = d3.sum(sortedData, d => +d[valueField]);
+    
+    // 为每个数据点添加百分比和累积百分比
+    let cumulativePercent = 0;
+    sortedData.forEach(d => {
+        d.percent = (+d[valueField] / total) * 100;
+        d.cumulativePercentStart = cumulativePercent;
+        cumulativePercent += d.percent;
+        d.cumulativePercentEnd = cumulativePercent;
+    });
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 40, right: 120, bottom: 40, left: 60 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${margin.left}, ${margin.top})`);
+    
+    // 计算金字塔的最大宽度（底部）和高度
+    const maxPyramidWidth = chartWidth * 0.6;
+    const pyramidHeight = chartHeight * 0.6; // 使用90%的高度，留出上下空间
+    
+    // 计算面积比例
+    // 金字塔总面积
+    const totalArea = maxPyramidWidth * pyramidHeight / 2;
+    
+    // 计算每个部分的高度（基于面积比例）
+    let currentHeight = 0;
+    const sections = [];
+    
+    sortedData.forEach((d, i) => {
+        // 该部分应占的面积比例
+        const areaRatio = d.percent / 100;
+        const sectionArea = totalArea * areaRatio;
+        
+        // 计算该部分的高度
+        // 对于梯形，面积 = (上底+下底) * 高 / 2
+        // 我们需要求解高度，已知面积和下底（上一部分的上底）
+        
+        // 首先计算该部分在整个三角形中的相对位置
+        const bottomPosition = currentHeight / pyramidHeight;
+        // 正三角形：底部宽，顶部窄
+        const bottomWidth = maxPyramidWidth * bottomPosition;
+        
+        // 求解该部分的高度
+        // 设高度为h，则上底 = maxPyramidWidth * (currentHeight + h) / pyramidHeight
+        // 面积方程：sectionArea = (bottomWidth + topWidth) * h / 2
+        
+        // 简化后的二次方程：
+        // h^2 * (maxPyramidWidth / (2 * pyramidHeight)) + h * bottomWidth - 2 * sectionArea = 0
+        
+        const a = maxPyramidWidth / (2 * pyramidHeight);
+        const b = bottomWidth;
+        const c = -2 * sectionArea;
+        
+        // 使用求根公式
+        const h = (-b + Math.sqrt(b*b - 4*a*c)) / (2*a);
+        
+        // 计算该部分的上底宽度
+        const topPosition = (currentHeight + h) / pyramidHeight;
+        const topWidth = maxPyramidWidth * topPosition;
+        
+        sections.push({
+            data: d,
+            bottomY: currentHeight,
+            topY: currentHeight + h,
+            bottomWidth: bottomWidth,
+            topWidth: topWidth
+        });
+        
+        currentHeight += h;
+    });
+    
+    // 计算垂直居中的偏移量
+    const verticalOffset = (chartHeight - pyramidHeight) / 2;
+    
+    // 绘制金字塔的每一层
+    sections.forEach((section, i) => {
+        const d = section.data;
+        
+        // 获取颜色
+        const color = colorResolver.field(d[categoryField], i, { palette: "category10" }).value;
+        
+        // 绘制梯形 - 添加垂直偏移
+        const points = [
+            [chartWidth / 2 - section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.topWidth / 2, section.topY + verticalOffset],
+            [chartWidth / 2 + section.bottomWidth / 2, section.bottomY + verticalOffset],
+            [chartWidth / 2 - section.bottomWidth / 2, section.bottomY + verticalOffset]
+        ];
+        
+        g.append("polygon")
+            .attr("points", points.map(p => p.join(",")).join(" "))
+            .attr("fill", color);
+        
+        // 计算标签位置，避免重叠 - 添加垂直偏移
+        const labelY = (section.topY + section.bottomY) / 2 + verticalOffset;
+        const labelX = chartWidth / 2;
+        
+        // 数据标签位置（在金字塔中心）
+        g.append("text")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", "white")
+            .text(`${chartUtils.format.autoText(+d[valueField])}`);
+            
+        // 类别标签（在左侧）
+        g.append("text")
+            .attr("x", chartWidth / 2 + Math.max(section.topWidth, section.bottomWidth) / 2 + 10)
+            .attr("y", labelY)
+            .attr("text-anchor", "start")
+            .attr("dominant-baseline", "middle")
+            .attr("font-size", "14px")
+            .attr("font-weight", "bold")
+            .attr("fill", colorResolver.field(d[categoryField], i, { palette: "category10" }).value)
+            .text(`${d[categoryField]}`);
+    });
+    
+    const roughness = 1;
+    const bowing = 2;
+    const fillStyle = "hachure";
+    const randomize = false;
+    const pencilFilter = false;
+        
+    const svgConverter = new svg2roughjs.Svg2Roughjs(containerSelector);
+    svgConverter.pencilFilter = pencilFilter;
+    svgConverter.randomize = randomize;
+    svgConverter.svg = svg.node();
+    svgConverter.roughConfig = {
+        bowing,
+        roughness,
+        fillStyle
+    };
+    svgConverter.sketch();
+    // Remove the first SVG element if it exists
+    const firstSvg = document.querySelector(`${containerSelector} svg`);
+    if (firstSvg) {
+        firstSvg.remove();
+    }
+    
+    return svg.node();
+}