Highcharts 實戰：如何將後端 JSON 數據完美呈現在圖表中

許多開發者在初次接觸 Highcharts 時，最常見的困惑就是如何將後端傳回的 JSON 數據正確地綁定到圖表的各個配置項中。這篇文章將透過一個實際的柱狀圖範例，詳細拆解從 AJAX 請求數據到圖表渲染的完整流程。

核心問題：數據從哪來？到哪去？

提問者提供了一段典型的 jQuery AJAX 代碼，後端返回的 JSON 結構（見下圖）包含城市名稱與對應的數值。關鍵在於如何將這些動態數據分別填入 xAxis.categories（X 軸類別）與 series.data（數據序列）中。

解決方案：動態構建圖表配置

最佳實踐是將 Highcharts 的初始化代碼放入 AJAX 的 success 回調函數中，確保數據就緒後再渲染圖表。以下是重構後的核心邏輯：

$(function() {
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: 'crmarrvalAction!findCity.action',
        success: function(json) {
            // 假設 json 格式為：[{name: '城市A', value: 10}, {name: '城市B', value: 20}...]
            var categories = [];
            var seriesData = [];
            
            $.each(json, function(index, item) {
                categories.push(item.name);   // 填充 X 軸類別
                seriesData.push(item.value);  // 填充數據序列
            });

            // 數據準備完畢，初始化圖表
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: '按照省份統計'
                },
                xAxis: {
                    categories: categories  // 此處填入動態生成的類別陣列
                },
                yAxis: {
                    title: {
                        text: '數量'
                    }
                },
                series: [{
                    name: '數量',
                    data: seriesData  // 此處填入動態生成的數據陣列
                }]
            });
        }
    });
});

關鍵點總結

• 異步順序： 圖表初始化必須在數據請求成功之後。
• 數據轉換： 使用 $.each 或 map 將後端對象陣列轉為 Highcharts 需要的純數值陣列（categories 為字串陣列，data 為數值陣列）。
• 官方文檔： 遇到配置困惑時，Highcharts 官網的 Demo 與 API 文檔是最權威的參考資料。

掌握這一模式，您就能輕松應對各種動態數據可視化需求，不再為「這裡怎麼填？」而煩惱。