Chart.setOptions() Kendo UI 中的错误

Question

我正在为 HTML5 使用 KendoUI 进行一个项目。我注意到图表小部件中的一个错误，其中 setOptions() 始终不起作用。这是重现错误的片段。

基本上，上面的代码片段创建了一个包含一些随机数据的图表。我还有一个复选框，用户可以在其中 enable/disable 缩放和平移图表。最初创建的图表没有设置 zoomable/pannable。

实际操作：

<!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 步：运行代码。（结果创建了一个图表）

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

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

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

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

Answer 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 时，问题似乎出现了。因此，根据使用 prevent default to disable pan/zoom 的解决方案，我们可以更改图表的选项。查看代码片段：

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

Chart.setOptions() Kendo UI 中的错误

Chart.setOptions() Bug in Kendo UI

kendo-ui

kendo-chart