2

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

    $("#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").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);
    });
4

1 回答 1

5

我想我现在明白你的要求是什么了。检查树形视图时，您需要从图表中删除系列。这应该通过从图表配置中删除系列然后调用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/

于 2013-03-07T12:20:34.097 回答