2

我有一个要求，即基于树视图复选框选择值轴需要更新。我正在使用 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：值轴变化

4

3 回答 3

2

为方便起见，我最初加载所有图表轴。它按照你的要求工作......

jsbin：http: //jsbin.com/eyibar/37/edit

<html>
    <head>
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
        <meta charset="utf-8" />
        <title>JS Bin</title>
        <style>
            #chart { width: 600px; }
        </style>
    </head>
    <body>
        <div id="treeview"></div>
        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
        </div>

        <script type="text/javascript">
            var valueAxes = [
                {
                    name: "KM",
                    title: { text: "KM" }
                },
                {
                    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(valueAxes) {
                $("#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(valueAxes);
                $("#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 = [];
                    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()) {
                                    checkedSeries.push(valueAxes);
                                    checkedSeries["visible"] = true;
                                }
                            });
                        });
                        createChart(checkedSeries);
                    }
                    else {
                        createChart(checkedSeries);
                    }
                });
            });

        </script>
    </body>
    </html>
于 2013-04-08T11:57:01.087 回答
2


是的，可以一次绑定和取消绑定值轴和系列。
更改您的脚本，如下所示

   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

于 2013-04-09T08:30:01.207 回答
1

我编辑了你的代码，我可以通过在长度 ==-1 的条件下调用 creatChart(checkedAxes) 函数来绑定和取消绑定值轴，当时系列没有更新。

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

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

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

                    chart.options.series = checkedSeries;
                    chart.options.valeAxes = checkedAxes;
                    chart.refresh();
                }
                    createChart(checkedAxes);
            });

但如果我尝试不调用 creatChart(checkedAxes) 函数，则绑定到图表的系列会更新。

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

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

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

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

我一次没有得到这两种情况。对不起，希望你找到解决方案。

干杯，快乐编码...

于 2013-04-09T07:33:13.573 回答