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 に答える