Kendo UI中的Chart.setOptions（）错误

我正在使用KendoUI for HTML5的项目。我注意到图表小部件中的一个错误，其中setOptions（）一直不工作。这里是重新创建错误的片段。Kendo UI中的Chart.setOptions（）错误

基本上，上面的代码片段用一些随机数据创建图表。我还有一个复选框，用户可以在图表上启用/禁用缩放和平移。最初创建的图表没有可缩放/平移集合。

看看操作：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <base href="https://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom"> 
 
    <style> 
 
    html { 
 
     font-size: 14px; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
    } 
 
    </style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="example"> 
 

 
    <div class="box wide"> 
 

 
     <input type="checkbox" id="eq1" class="k-checkbox"> 
 
     <label class="k-checkbox-label" for="eq1">Enable Zoom</label> 
 
     <p id="para">Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p> 
 

 
    </div> 
 
    <div class="demo-section k-content wide"> 
 
     <div id="chart"></div> 
 
     <div id="log" style=" 
 
      height: 120px; 
 
      overflow: scroll; 
 
      padding: 20px; 
 
      border: 1px solid black;"> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     // Sample data 
 
     var data = []; 
 
     for (var i = 0; i < 50; i++) { 
 
     var val = Math.round(Math.random() * 10); 
 
     data.push({ 
 
      category: "C" + i, 
 
      value: val 
 
     }); 
 
     } 
 

 
     function createChart() { 
 
     $("#chart").kendoChart({ 
 
      renderAs: "canvas", 
 
      dataSource: { 
 
      data: data 
 
      }, 
 
      categoryAxis: { 
 
      min: 0, 
 
      max: 10, 
 
      labels: { 
 
       rotation: "auto" 
 
      } 
 
      }, 
 
      series: [{ 
 
      type: "column", 
 
      field: "value", 
 
      categoryField: "category" 
 
      }] 
 

 
     }); 
 
     } 
 

 
     $(document).ready(createChart); 
 
     $("#example").bind("kendo:skinChange", createChart); 
 

 
     $("#eq1").click(function(e) { 
 
     if (this.checked) { 
 
      setZoom({ 
 
      pannable: { 
 
       lock: "y" 
 
      }, 
 
      zoomable: { 
 
       mousewheel: { 
 
       lock: "y" 
 
       }, 
 
       selection: { 
 
       lock: "y" 
 
       } 
 
      } 
 
      }); 
 
     } else { 
 
      setZoom({ 
 
      pannable: false, 
 
      zoomable: false 
 
      }); 
 
     } 
 
     }); 
 

 
     function setZoom(obj) { 
 
     try { 
 
      $("#chart").data("kendoChart").setOptions(obj); 
 
     } catch (ex) { 
 
      $('#log').append($('<div/>').text("Error : " + ex.message + "\n" + ex.stack + "\n")); 
 
     } 
 
     } 
 
    </script> 
 
    </div> 
 
</body> 
 
</html>

在用户与复选框（左上角），可缩放的和图表的可平移属性相互作用被设定使用chart.setOptions（）中可利用的方法该框架。如果“运行代码段”不起作用，请按照以下步骤操作，您可以看到该错误正在执行中。

第1步：将上面的代码复制到编辑器中http://dojo.telerik.com/ 第2步：运行代码。（A图表得到作为结果创建）

步骤3：勾选复选框以启用图表变焦。（可缩放和可平移的属性上设定x轴，使得图表，现在可以缩放和可平移）

步骤4：取消选中的复选框来禁用图表变焦。（可平移被禁用，但图表仍可以缩放 - 这是错误。）

第5步：再次勾选复选框，你会看到其中的图表显示下了错误。

如果有人知道如何解决这个问题。如果这是KendoUI的错误，那么希望Kendo开发团队得到这个。

来源

2016-06-20 Vinnie

也就是说奇怪，为寻找一个解决，您可以使用防止对事件默认：

... 
      zoom: preventThisPlease, 
      dragStart: preventThisPlease, 
... 

     function preventThisPlease(e) { 
     if (! document.getElementById('eq1').checked) { 
      e.preventDefault(); 
     }   
     }

随着的复选框变化的刷新，如果你需要重新设置缩放水平和平移位置：

$("#eq1").click(function(e) { 
    $("#chart").data("kendoChart").refresh(); 
    });

UPDATE：（要更改图表配置选项）。 看来，当我们尝试将可pannable或可缩放设置为false时会出现问题。因此，在解决方案上进行调整以防止使用默认设置禁用平移/缩放，我们可以更改图表的选项。见代码片段：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <base href="https://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom"> 
 
    <style> 
 
    html { 
 
     font-size: 14px; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
    } 
 
    </style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="example"> 
 

 
    <div class="box wide"> 
 

 
     <form class="chart-switch"> 
 
     Restrict Pan & Zoom to: 
 

 
     <input type="radio" name="radio" id="eq1" class="k-radio"> 
 
     <label class="k-radio-label" for="eq1">X</label> 
 

 
     <input type="radio" name="radio" id="eq2" class="k-radio"> 
 
     <label class="k-radio-label" for="eq2">Y</label>   
 

 
     <input type="radio" name="radio" id="eq3" class="k-radio"> 
 
     <label class="k-radio-label" for="eq3">X & Y</label> 
 

 
     <input type="radio" name="radio" id="eq4" class="k-radio" checked> 
 
     <label class="k-radio-label" for="eq4">None</label> 
 
     </form>   
 
     
 

 
     <p id="para">Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p> 
 

 
    </div> 
 
    <div class="demo-section k-content wide"> 
 
     <div id="chart"></div> 
 
     <div id="log" style=" 
 
      height: 120px; 
 
      overflow: scroll; 
 
      padding: 20px; 
 
      border: 1px solid black;"> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     // Sample data 
 
     var data = []; 
 
     for (var i = 0; i < 50; i++) { 
 
     var val = Math.round(Math.random() * 10); 
 
     data.push({ 
 
      category: "C" + i, 
 
      value: val 
 
     }); 
 
     } 
 

 
     function createChart() { 
 
     $("#chart").kendoChart({ 
 
      renderAs: "canvas", 
 
      dataSource: { 
 
      data: data 
 
      }, 
 
      categoryAxis: { 
 
      min: 0, 
 
      max: 10, 
 
      labels: { 
 
       rotation: "auto" 
 
      } 
 
      }, 
 
      series: [{ 
 
      type: "column", 
 
      field: "value", 
 
      categoryField: "category" 
 
      }], 
 
      zoom: preventThisPlease, 
 
      dragStart: preventThisPlease, 
 
      pannable: { 
 
       lock: "x" 
 
      }, 
 
      zoomable: { 
 
       mousewheel: { 
 
       lock: "x" 
 
       }, 
 
       selection: { 
 
       lock: "x" 
 
       } 
 
      } 
 

 
     }); 
 
     } 
 

 
     $(document).ready(createChart); 
 
     $("#example").bind("kendo:skinChange", createChart); 
 

 
// Disable Pan/Zoom 
 
     function preventThisPlease(e) { 
 
     if (document.getElementById('eq4').checked) { 
 
      e.preventDefault(); 
 
     }   
 
     }  
 

 
// Pan/Zoom options changing 
 
     $(".chart-switch input").on('change', function(e) { 
 

 
     // Get reference to the chart 
 
     var theChart = $("#chart").data("kendoChart"); 
 

 
     // See which radio button is checked 
 
     var radioId = $(e.target).attr('id'); 
 
     var toLock = "none"; 
 

 
     switch(radioId) { 
 
      case "eq1": 
 
      toLock = "y"; 
 
      break; 
 
      case "eq2": 
 
      toLock = "x"; 
 
      break; 
 
      default: 
 
      toLock = "none"; 
 
     } 
 

 
     try { 
 
      theChart.options.pannable.lock = toLock; 
 
      theChart.options.zoomable.mousewheel.lock = toLock; 
 
      theChart.options.zoomable.selection.lock = toLock; 
 

 
      theChart.refresh(); 
 
     } catch (ex) { 
 
      $('#log').append($('<div/>').text("Error : " + ex.message + "\n" + ex.stack + "\n")); 
 
     } 
 

 
     }); 
 

 
    </script> 
 
    </div> 
 
</body> 
 
</html>

来源

2016-06-20 13:48:50

感谢格伦，这是可能的解决方法。但它只适用于仅锁定x轴或仅锁定y轴的情况。现在我有一个问题，我希望x轴和y轴都被放大和平移！这就是我想要使用图表小部件中可用的setOptions（）方法的原因。我只想给用户一个灵活性，以便用户可以做到以下几点：a）缩放x轴，b）缩放y轴c）缩放x和y轴，d）禁用x和y轴上的缩放。我该如何做到这一点？ – Vinnie

看来我们得到的错误是由于将pannable或zoomable设置为false，因此当您想禁用平移/缩放时，请保留我的“黑客”以防止默认操作我可以更改图表的选项，如： theChart.options.pannable.lock =“x”; 我会发布一个工作代码片段作为答案。 –

这很棒，完美的作品。非常感谢你。：） – Vinnie

Kendo UI中的Chart.setOptions（）错误

回答

相关问题