kendo-ui - 根据选择是否可以更改值轴

Question

我有一个要求，即基于 TreeView 复选框选择，值轴需要更新。我使用 4 个复选框和 4 个值轴。当我检查第一个项目时，相应的值轴应该更改。3 其他轴应处于不可见状态。

我在这里尝试了一些代码并更新了。

代码:

 <div id="treeview"></div>
  <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
       </div> 

 var valueAxes = [
       { name: "KM",visible:false,
        title: { text: "KM" ,visible:false}
                                },
                              { name: "Miles Per Gallon",
                                    title: { text: "Miles Per Gallon" }
                                },

                            {
                                name: "Miles",

                                title: { text: "Miles " }
                            },

                            {
                                name: "liters per 100km", 
                                title: { text: "liters per 100km" }
                            }
                        ];
    function createChart() {
                        $("#chart").kendoChart({

                            legend: {
                                position: "top"
                            },
                            series: [{
                                type: "column",
                                data: [20, 40, 45, 30, 50],
                                stack: true,
                                name: "on battery",
                                color: "#003c72"
                            }, {
                                type: "column",
                                data: [20, 30, 35, 35, 40],
                                stack: true,
                                name: "on gas",
                                color: "#0399d4"
                            }, {
                                type: "area",
                                data: [30, 38, 40, 32, 42],
                                name: "mpg",
                                color: "#642381" 

                            }, {
                                type: "area",
                                data: [7.8, 6.2, 5.9, 7.4, 5.6],
                                name: "l/100 km",
                                color: "#e5388a" 

                            }],
                            valueAxes:valueAxes,                      
                            categoryAxis: {
                                categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],

                                axisCrossingValues: [0, 0, 10, 10]
                            }

                        });
                    }

        $(document).ready(function() {    
            createChart();     
            $("#treeview").kendoTreeView({
              checkboxes: {
               checkChildren: true
                },
          dataSource: [{
            id: 1,
            text: "Value axis",
            expanded: true,
            items: [{
                id: 2,
                text: "KM"  
            },
            {
                id: 3,
                text: "Miles Per Gallon" 
            },
              {
                id: 4,
                text: "Miles "   
            },
              {
                id: 5,
                text: "liters per 100km"  
            }]
        }]
    }).data("kendoTreeView");
    $("#treeview").on("change", function (e) {
        var chart = $("#chart").data("kendoChart");
        var checkedSeries = [];    
        $("#treeview").find(":checked").each(function() {
          var nodeText =$(this).parent().parent().text();        
          $.each(valueAxes, function(index, valueAxes) {
             if (valueAxes.name == nodeText) {
              checkedSeries.push(valueAxes);
             checkedSeries.visible==="true";
             checkedSeries.title.visible===true;
                }
            });
        });    
        chart.options.valueAxes = checkedSeries;
        chart.refresh();
    });                     
    });

jsbin: Value axis change

Answer 1

是的，可以一次绑定(bind)和解除绑定(bind)值轴和系列。
像下面这样更改您的脚本

   var valueAxes = [
               {
                   name: "KM", labels: {
                       format: "{0}"
                   }, min: 0,
                   max: 9,


                   title: { text: "KM" }
               },
               {
                   name: "Miles Per Gallon", labels: {
                       format: "{0}%"
                   }, min: 0,
                   max: 5,


                   title: { text: "Miles Per Gallon" }
               },

              {
                  name: "Miles", labels: {
                      format: "{0}%"
                  },

                  title: { text: "Miles " }
              },

              {
                  name: "liters per 100km", min: 0,
                  max: 1,

                  title: { text: "liters per 100km" }
              }];

        var series = [{
            type: "column",
            axis: "KM",
            data: [20, 40, 45, 30, 50],
            stack: true,
            name: "KM",
            color: "#003c72"
        }, {
            type: "column",
            data: [20, 30, 35, 35, 40],
            axis: "Miles Per Gallon",
            stack: true,
            name: "Miles Per Gallon",
            color: "#0399d4"
        }, {
            type: "column",
            data: [30, 38, 40, 32, 42],
            axis: "Miles",
            name: "Miles",
            color: "#642381"

        }, {
            type: "column",
            axis: "liters per 100km",
            data: [7.8, 6.2, 5.9, 7.4, 5.6],
            name: "liters per 100km",
            color: "#e5388a"

        }];
        function createChart(inputValueAxes, inputSeries) {
            $("#chart").kendoChart({

                legend: {
                    position: "top"
                },
                series: inputSeries,
                valueAxes: inputValueAxes,
                categoryAxis: {
                    categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],

                    axisCrossingValues: [0, 0, 10, 10]
                }

            });
        }

        $(document).ready(function () {
            createChart(valueAxes, series);
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
                dataSource: [{
                    id: 1,
                    text: "Value axis",
                    expanded: true,
                    items: [{
                        id: 2,
                        text: "KM"
                    },
                    {
                        id: 3,
                        text: "Miles Per Gallon"
                    },
                      {
                          id: 4,
                          text: "Miles "
                      },
                      {
                          id: 5,
                          text: "liters per 100km"
                      }]
                }]
            }).data("kendoTreeView");

            $("#treeview").on("change", function (e) {
                var chart = $("#chart").data("kendoChart");
                var checkedSeries = [];
                var checkedAxes = [];
                if ($("#treeview").find(":checked").length !== 0) {
                    $("#treeview").find(":checked").each(function () {
                        var nodeText = $(this).parent().parent().text();

                        $.each(valueAxes, function (index, valueAxes) {
                            if (valueAxes.name == nodeText.trim()) {
                                checkedAxes.push(valueAxes);
                                checkedAxes.visible = true;
                            }
                        });

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

                    createChart(checkedAxes, checkedSeries);
                }

                else {
                    createChart(checkedAxes, checkedSeries);
                }

            });
        });

引用这个http://jsbin.com/eyibar/49/edit