jQuery雷達圖插件：動態構建values數據對象替換靜態配置

使用 radarChart 等圖表插件時，往往需要將後端返回或用戶輸入的動態數據綁定到 values 配置項。關鍵在於構建一個 { key: value } 格式的純對象。

動態構建示例

$('#qd').click(function() {
    var names = [], values = [];
    // 假設從頁面輸入框獲取數據
    $('#title input').each(function() { names.push($(this).val()); });
    $('#number input').each(function() { values.push(parseFloat($(this).val()) || 0); });

    // 核心：構建 values 對象
    var chartData = {};
    for (var i = 0; i < names.length; i++) {
        if (names[i]) chartData[names[i]] = values[i];
    }

    $('#chart').radarChart({
        size: [500, 400],
        step: 1,
        title: "My Skills",
        values: chartData, // 直接傳入動態對象
        showAxisLabels: true
    });
});

關鍵點

• 使用 each() 遍歷輸入框收集數據，比手動索引更健壯。
• 構建對象時做非空判斷，避免無效鍵值對。
• 插件內部會遍歷 values 對象的屬性生成圖表，只要格式正確即可。

這種模式適用於所有接受「鍵值對配置」的JS圖表庫（如Chart.js, ECharts的series.data等）。