带有图形更新的Treeview复选框选择无法正常工作 [英] Treeview checkbox selection with graph updation is not working properly

问题描述

在我的项目中，我具有图表和树视图，而页面加载图表更新无法正常工作，这意味着在树视图中，页面加载中仅选中了两个复选框，但图表显示了所有字段值.我需要仅在图表中显示复选框选中的字段值页面加载时，(页面加载后工作正常).

这是小提琴: http://jsfiddle.net/RHh67/64/

我的图表代码:

$("#myChart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    dataSource: {
        data: tmpData2,
        sort: {
            field: "date",
            dir: "asc"
        },
        schema: {
            model: {
                fields: {
                    date: {
                        type: "date"
                    }
                }
            }
        }
    },
    title: {
        text: "My Date-aware Chart"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "line",
        labels: {
            visible: true
        },
        missingValues: "gap"
    },
    series: series,
    valueAxis: [{
        name: "A",
        labels: {
            format: "{0}%"
        }
    },
    {
        name: "B",
        labels: {
            format: "{0}D"
        }
    }],
    categoryAxis: {
        type: "Date",
        field: "date",
        axisCrossingValue: [0, 1000]
    }

});

解决方案

将redrawChart定义为使用新系列刷新图表的redrawChart:

function redrawChart() {
    var chart = $("#myChart").data("kendoChart");

    var checkedSeries = [];

    $("#treeview").find(":checked").each(function () {
        var nodeText = $(this).parent().parent().text();

        $.each(series, function (index, series) {
            if (series.field == nodeText) {
                checkedSeries.push(series);
            }
        });
    });

    chart.options.series = checkedSeries;
    chart.refresh();
}

此功能需要被调用:

1. 在换树时.
2. 设置初始可见序列后.

此外，将初始系列的选择移到JavaScript代码的末尾.我的意思是，首先初始化treeview和chart，然后才初始化初始值.

tree.dataItem(".k-item:nth(2)").set("checked", true);
tree.dataItem(".k-item:nth(3)").set("checked", true);
updateChks();
redrawChart();

完整的运行版本位于此处 http://jsfiddle.net/OnaBai/RHh67/68/

In my project i have chart and treeview while pageload chart update is not working properly means here in treeview only two checkboxes are checked in pageload but chart is displaying all the field values.i need to display only checkbox checked field values in chart while pageload,( after page-load it's working fine).

here is the fiddle: http://jsfiddle.net/RHh67/64/

My chart code:

$("#myChart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    dataSource: {
        data: tmpData2,
        sort: {
            field: "date",
            dir: "asc"
        },
        schema: {
            model: {
                fields: {
                    date: {
                        type: "date"
                    }
                }
            }
        }
    },
    title: {
        text: "My Date-aware Chart"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "line",
        labels: {
            visible: true
        },
        missingValues: "gap"
    },
    series: series,
    valueAxis: [{
        name: "A",
        labels: {
            format: "{0}%"
        }
    },
    {
        name: "B",
        labels: {
            format: "{0}D"
        }
    }],
    categoryAxis: {
        type: "Date",
        field: "date",
        axisCrossingValue: [0, 1000]
    }

});

解决方案

Define a redrawChart that refreshes the Chart with the new series as:

function redrawChart() {
    var chart = $("#myChart").data("kendoChart");

    var checkedSeries = [];

    $("#treeview").find(":checked").each(function () {
        var nodeText = $(this).parent().parent().text();

        $.each(series, function (index, series) {
            if (series.field == nodeText) {
                checkedSeries.push(series);
            }
        });
    });

    chart.options.series = checkedSeries;
    chart.refresh();
}

This functions needs to be invoked:

1. On your tree change.
2. After setting the initial visible series.

In addition, move the selection of the initial series to the end of the JavaScript code. I mean, first initialize treeview and chart and only then initialize the initial values.

tree.dataItem(".k-item:nth(2)").set("checked", true);
tree.dataItem(".k-item:nth(3)").set("checked", true);
updateChks();
redrawChart();

The complete running version is in here http://jsfiddle.net/OnaBai/RHh67/68/

这篇关于带有图形更新的Treeview复选框选择无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！