javascript - 我的剑道图表没有以正确的方式过滤

Question

我有一个带组字段的剑道图表，还有带 3 个复选框的 TreeView 。我想用选中复选框的事件过滤图表。但在我的应用程序中它不起作用。请任何人帮忙我。我的图表代码是

    $("#myChart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    dataSource: {
    data: tmpData2,
    sort: {
            field: "date",
            dir: "asc"
        },
    group: {
            field: "close"
        },
        schema: {
            model: {
                fields: {
                    date: {
                        type: "date"  }
                }
            }
        }
    },
    title: {
        text: "My Date-aware Chart"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "line",
        labels: {
            visible: true
        },
        missingValues: "gap"
    },
    series: [{
        name: "Close",
        field: "closeA",
        axis: "A"
    },

    {
        name: "Close",
        field: "closeb",
        axis: "B"
    },
             {      name: "Close",
        field: "closec",
        axis: "B"
         }],
        valueAxis: [{
        name: "A",
        labels: {
            format: "{0}%"
        }
    },
    {
        name: "B",
        labels: {
            format: "{0}D"
        }
    }],
    categoryAxis: {
        type: "Date",
        field: "date",
        axisCrossingValue: [0, 1000]
    }

});

我的 TreeView 代码是

    $("#treeview").on("change", function (e) {
        console.log("click", multi.text());
        var selected = multi.text().split(",");
        console.log("multi", selected);
        var condition = {
            logic  : "or",
            filters: [
            ]
        };
        $.each(selected, function (idx, elem) {
            condition.filters.push({ field: " close", operator: "eq", value: elem.trim() });
        });
        mychart.dataSource.filter(condition);
    });

Answer 1

我想我现在明白你的要求是什么了。检查 TreeView 时，您需要从图表中删除系列。这应该通过从图表配置中删除系列然后调用 refresh 方法来实现:

// All series
var series = [{
    name: "Close",
    field: "closeA",
    axis: "A"
},
{
     name: "Close",
     field: "closeb",
     axis: "B"
},
{      
     name: "Close",
     field: "closec",
     axis: "B"
}
];

$("#treeview").on("change", function (e) {
    var chart = $("#myChart").data("kendoChart");

    // Start with empty series
    var checkedSeries = [];

    // Iterate all checked checkboxes in the treeview
    $("#treeview").find(":checked").each(function() {
        // Get the checked node's text - it is the grand parent of the checkbox element
        var nodeText = $(this).parent().parent().text();

        // Find the series whose field is the same as the node's text
        $.each(series, function(index, series) {
            if (series.field == nodeText) {
                // add it to the checkedSeries array
                checkedSeries.push(series);
            }
        });
    });

    // Set the chart series
    chart.options.series = checkedSeries;
    // Refresh the chart
    chart.refresh();
});

这是更新后的 jsFiddle:http://jsfiddle.net/RHh67/43/