如何使按鈕根據 Highcharts 熱圖中的 select 類別過濾不同的數據？

Question

我有一個熱圖，需要根據用戶選擇的不同類別進行更新。 每個類別都有自己的子類別。 例如：

Prime: 
  'Prime Institutional' 
  'Prime Retail'
Government and Treasury: 
  'Government' 
  'Treasury'
Tax Exempt: 
  'Tax Exempt Retail' 
  'Tax Exempt Institutional'

這是 excel 表中數據的樣子。

有人可以幫我將此功能添加到我的圖表嗎？

function get_data() {
            // Need to determine which elements are selected
            let selected = ['Prime Institutional', 'Government'];

            let result = {};

            selected.forEach(sel => {
                Object.keys(data[sel]).forEach(date => {
                    Object.keys(data[sel][date]).forEach(price => {
                        // Skip prices that fall outside the range
                        if ((price < ymin) || (price > ymax)) {
                            return;
                        }
                        // Create the maps if they don't exist
                        if (result[date] === undefined) {
                            result[date] = {};
                        }
                        if (result[date][price] === undefined) {
                            result[date][price] = {};
                        }
                        
                        // Set the value
                        result[date][price] = data[sel][date][price];
                    })
                })
            });

            // Make the data
            let new_data = [];
            Object.keys(result).forEach(date => {
                Object.keys(result[date]).forEach(price => {
                    // console.log(parseFloat(price));
                    new_data.push({
                        x: parseInt(date),
                        y: (parseFloat(price)*10000),
                        value: result[date][price]
                    });
                });
            });
            chart.series[0].setData(new_data);
        }

可以在此處找到 jsfiddle 的示例： https://jsfiddle.net/samwhite/oyzw75xj/4/

Answer 1

您可以向 function 添加參數，例如selected並基於該參數構建數據結構。

document.getElementById('primeBtn').addEventListener('click', function() {
    set_data(['Prime Retail', 'Prime Institutional']);
});

document.getElementById('govtTreasBtn').addEventListener('click', function() {
    set_data(['Treasury', 'Government']);
});

document.getElementById('taxExmptBtn').addEventListener('click', function() {
    set_data(['Tax Exempt Institutional', 'Tax Exempt Retail']);
});

---

現場演示： https://jsfiddle.net/BlackLabel/df4urhva/

API 參考： https://api.highcharts.com/class-reference/Highcharts.Series#setData