Question

在我的项目中，我有图表和树视图，而页面加载图表更新无法正常工作意味着在树视图中仅在页面加载中检查了两个复选框，但图表显示了所有字段值。我需要在图表中仅显示复选框选中的字段值pageload，（页面加载后工作正常）。

我的图表代码：

$("#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]
    }

});

Answer 1

定义一个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();
}

需要调用此函数：

在树上更换。
设置初始可见系列后。

此外，将初始系列的选择移动到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/

具有图形更新的Treeview复选框选择无法正常工作

1 个答案: