Kendo UI 中的 Chart.setOptions() 错误答案

【问题标题】：Chart.setOptions() Bug in Kendo UIKendo UI 中的 Chart.setOptions() 错误
【发布时间】：2016-06-20 11:50:02
【问题描述】：

我正在开发一个使用 HTML5 的 KendoUI 的项目。我注意到图表小部件中的一个错误，其中 setOptions() 始终无法正常工作。这是重新创建错误的 sn-p。

基本上，上面的 sn-p 创建一个包含一些随机数据的图表。我还有一个复选框，用户可以在其中启用/禁用缩放和平移图表。最初创建的图表没有可缩放/可平移集。

见效：

<!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 步：将上面的 sn-p 复制到 http://dojo.telerik.com/ 的编辑器中第二步：运行代码。（结果创建了一个图表）

第 3 步：勾选复选框以启用图表缩放。（在 x 轴上设置可缩放和可平移属性，以便图表现在可以缩放和平移）

第 4 步：取消选中复选框以禁用图表缩放。（pannable 被禁用，但图表仍然可以缩放。-这是错误）

第 5 步：再次勾选复选框，您将看到图表下方显示的错误。

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

【问题讨论】：

标签： kendo-ui kendo-chart

【解决方案1】：

这很奇怪，对于正在寻找解决方法的人来说，您可以在事件上使用防止默认值：

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

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

如果需要，请刷新复选框更改以重置缩放级别和平移位置：

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

更新：（更改图表配置选项）。 当我们尝试将 pannable 或 zoomable 设置为 false 时，似乎会出现问题。因此，调整解决方案以使用防止默认禁用平移/缩放，我们能够更改图表的选项。见代码sn-p：

<!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>

【讨论】：

感谢 Glen，这是可能的解决方法。但它仅在我只想锁定 x 轴或仅 y 轴时才有效。现在我有一个问题，我希望 x 轴和 y 轴都被缩放和平移！这就是我想使用图表小部件中可用的 setOptions() 方法的原因。我只想给用户一个灵活性，以便用户可以执行以下操作：a）缩放 x 轴，b）缩放 y 轴 c）缩放 x 和 y 轴，d）禁用 x 和 y 轴上的缩放。我该如何做到这一点？
看来我们得到的错误是由于将 pannable 或 zoomable 设置为 false，所以当你想禁用 pan/zoom 时保持我的“hack”以防止默认操作我可以改变图表的选项如：theChart.options.pannable.lock = "x";我将发布一个工作代码 sn-p 作为答案。
太好了，完美运行。非常感谢。:)