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（）錯誤

回答

相關問題