FusionCharts 餅圖顯示異常：basepath 路徑衝突解決

問題現象

使用 FusionCharts 渲染餅圖時，圖表效果異常（如圖所示），懷疑屬性配置錯誤。

根本原因

JSP 頁面中包含 <%basepath%> 標籤，導致 FusionCharts 內部資源路徑解析錯誤。FusionCharts 加載 SWF/JS 文件時，路徑解析受 basepath 影響，造成資源無法正確加載。

解決方案

1. 刪除 JSP 頁面中的 <%basepath%> 標籤
2. 在 FusionCharts 初始化配置中顯式指定正確的資源路徑（如 swfUrl、jsUrl）
3. 確保相對路徑或絕對路徑指向 FusionCharts 資源文件實際位置

代碼示例

<!-- 移除 basepath 干擾 -->
<script type="text/javascript" src="/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="/fusioncharts/themes/fusioncharts.theme.fint.js"></script>

<div id="chart-container"></div>

<script>
    FusionCharts.ready(function() {
        var chart = new FusionCharts({
            type: 'pie2d',
            renderAt: 'chart-container',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "銷售分佈",
                    "subCaption": "2023 年度",
                    "theme": "fint"
                },
                "data": [
                    {"label": "華東", "value": "35"},
                    {"label": "華南", "value": "25"},
                    {"label": "華北", "value": "20"},
                    {"label": "西南", "value": "12"},
                    {"label": "西北", "value": "8"}
                ]
            }
        });
        chart.render();
    });
</script>

避坑指南

• JSP 中使用 base 標籤或 basepath 變量時，需確保不影響第三方圖表庫資源加載
• FusionCharts 官方建議使用 dataFormat: 'json' 並顯式指定資源路徑
• 瀏覽器開發者工具 Network 面板可快速定位 404 資源請求

總結

問題核心在於 JSP 的 basepath 污染了 FusionCharts 的資源路徑解析。移除干擾並顯式配置路徑即可恢復正常渲染。