如何通过多选下拉框动态更新Kendo Chart？求示例指导

没问题，我来帮你搞定这个需求！核心思路就是给MultiSelect绑定change事件，每次用户选中/取消选项时，拿到选中的列表，然后根据这些值筛选或请求对应数据，最后更新图表即可。咱一步步来：

1. 给MultiSelect添加Change事件监听 #

首先修改你的MultiSelect初始化代码，加上change事件，用来捕获用户的选择变化：

$('#multiselect').kendoMultiSelect({
    dataTextField: "Text",
    dataValueField: "Text",
    valuePrimitive: true,
    dataSource: result.list_of_parks,
    // 新增change事件，捕获选择变化
    change: function() {
        // 拿到当前选中的所有值（因为valuePrimitive: true，所以是Text值组成的数组）
        var selectedValues = this.value();
        // 调用数据处理和图表更新函数
        updateChart(selectedValues);
    }
});

2. 编写数据处理与图表更新逻辑 #

接下来写updateChart函数，这里我们分两种场景处理：如果是前端过滤现有数据集，或者需要请求后端接口获取数据。

场景1：前端过滤已有数据集 #

假设你有全局存储的完整生产数据和风速数据，直接根据选中项过滤即可：

// 示例全局原始数据（和你的图表字段对应）
// const allProductionData = [
//     { name: "公园A", productionvalue: 1200000 },
//     { name: "公园B", productionvalue: 800000 },
//     ...
// ];
// const allWindData = [
//     { name: "公园A", windvalue: 8.5 },
//     { name: "公园B", windvalue: 6.2 },
//     ...
// ];

function updateChart(selectedParks) {
    // 如果没有选中任何选项，默认展示全部数据
    if (selectedParks.length === 0) {
        createChart(allProductionData, allWindData);
        return;
    }

    // 过滤出选中公园对应的生产数据和风速数据
    const filteredProduction = allProductionData.filter(item => selectedParks.includes(item.name));
    const filteredWind = allWindData.filter(item => selectedParks.includes(item.name));

    // 更新图表
    createChart(filteredProduction, filteredWind);
}

场景2：请求后端接口获取数据 #

如果数据需要从后端获取，就把过滤逻辑换成AJAX请求，把选中项作为参数传给后端：

function updateChart(selectedParks) {
    // 发起请求，携带选中的公园列表
    $.ajax({
        url: "/api/get-chart-data",
        type: "POST",
        data: { parks: selectedParks },
        success: function(response) {
            // 假设后端返回{ productionData: [...], windData: [...] }
            createChart(response.productionData, response.windData);
        },
        error: function() {
            alert("数据加载失败，请重试");
        }
    });
}

3. 修正并复用你的CreateChart函数 #

注意你原代码里有拼写错误（buttom改成bottom）和多余的闭合括号，我帮你修正了：

function createChart(data, data_wind) { 
    $("#topMonth").kendoChart({ 
        series: [
            { 
                data: data, 
                type: "column", 
                axis: "l100km", 
                field: "productionvalue", 
                categoryField: "name", 
                color: "#228B22" 
            }, 
            { 
                axis: "ava", 
                data: data_wind, 
                type: "line", 
                field: "windvalue", 
                categoryField: "name", 
                color: "#007eff", 
            }
        ], 
        valueAxes: [ 
            { 
                name: "l100km", 
                title: { text: "Production (MW/H)" }, 
                majorGridLines: { visible: false }, 
                minorGridLines: { visible: false }, 
            }, 
            { 
                name: "ava", 
                title: { text: "Average Wind Speed(KM/H)" }, 
                min: 0, 
                majorUnit: 1, 
                majorGridLines: { visible: false }, 
                minorGridLines: { visible: false }, 
            } 
        ], 
        categoryAxis: { 
            majorGridLines: { visible: false }, 
            labels: { 
                padding: { left: -20, bottom: 0 }, 
                rotation: 340 
            }, 
            axisCrossingValues: [0, 20], 
        }, 
        tooltip: { 
            visible: true, 
            template: " #= value #" 
        }, 
    }); 
    $(window).on("resize", function () { 
        kendo.resize($(".chart-wrapper")); 
    }); 
}

额外优化提示 #

如果你想避免每次都重新初始化图表，可以直接获取图表实例，用setOptions方法更新数据，性能更优：

function updateChart(selectedParks) {
    // 过滤数据逻辑...
    const chart = $("#topMonth").data("kendoChart");
    chart.setOptions({
        series: [
            { data: filteredProduction },
            { data: filteredWind }
        ]
    });
}

内容的提问来源于stack exchange，提问作者user9095836