如何让按钮根据它们在 Highcharts 热图中 select 的类别过滤不同的数据？

Question

我有一个热图需要根据用户选择的不同类别进行更新。每个类别都有自己的子类别。例如：

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

这就是 excel sheet 中数据的样子。

有人可以帮我把这个功能添加到我的图表吗？

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

您可以向您的函数添加一个参数，例如 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

如何让按钮根据它们在 Highcharts 热图中 select 的类别过滤不同的数据？

How to make buttons filter different data based on a category they select in Highcharts heatmap?

javascript

jquery

heatmap

highcharts