如何自定义FusionCharts Doughnut2D图表图例样式？求代码实现

要实现矩形图例图标、标签与数值分两行显示的需求，核心是通过FusionCharts的自定义图例模板和图例样式配置来完成，以下是完整代码实现：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入FusionCharts核心库 -->
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <style>
        /* 自定义图例项样式，确保标签和数值分两行 */
        .custom-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }
        .legend-details {
            display: flex;
            flex-direction: column;
        }
        .legend-label {
            font-size: 14px;
            color: #333;
        }
        .legend-value {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 图表容器 -->
    <div id="doughnut-chart"></div>

    <script>
        FusionCharts.ready(function() {
            const doughnutChart = new FusionCharts({
                type: 'doughnut2d',
                renderAt: 'doughnut-chart',
                width: '600',
                height: '400',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "月度销售占比",
                        "subCaption": "2024年Q1",
                        "showPercentValues": "0",
                        "decimals": "1",
                        "theme": "fusion",
                        // 核心配置：设置图例图标为矩形
                        "legendIcon": "rectangle",
                        // 自定义图例项模板，实现图标+标签+数值分两行
                        "legendItemTemplate": `
                            <div class="custom-legend-item">
                                {%icon%}
                                <div class="legend-details">
                                    <span class="legend-label">{%label%}</span>
                                    <span class="legend-value">{%value%} ({%percentValue%})</span>
                                </div>
                            </div>
                        `,
                        // 调整图例布局与间距
                        "legendPosition": "right",
                        "legendBorderAlpha": "0",
                        "legendItemGap": "10"
                    },
                    "data": [
                        {"label": "电子产品", "value": "28504"},
                        {"label": "服装鞋帽", "value": "14633"},
                        {"label": "家居用品", "value": "10507"},
                        {"label": "食品饮料", "value": "9528"},
                        {"label": "其他品类", "value": "5120"}
                    ]
                }
            });
            doughnutChart.render();
        });
    </script>
</body>
</html>

关键配置说明 #

• legendIcon: "rectangle"：直接将默认的圆形图例图标改为矩形。
• legendItemTemplate：通过HTML模板自定义图例项结构，使用FusionCharts内置模板变量：
  • {%icon%}：渲染当前系列的矩形图标
  • {%label%}：渲染系列标签文本
  • {%value%}：渲染系列原始数值
  • {%percentValue%}：渲染系列占比百分比
• 自定义CSS：通过flex布局实现图标与文本的对齐，同时将标签和数值设置为垂直排列，确保分两行显示。

注意事项 #

• 确保使用的FusionCharts版本支持自定义图例模板（建议v3.12及以上版本）
• 可根据需求调整CSS样式中的字体、颜色、间距等参数，匹配你的UI设计

内容的提问来源于stack exchange，提问作者PRAKASH CHANDRA