Панорамирование и масштабирование диаграммы ящика для кендо

Question

Я пытаюсь использовать функции панорамирования и масштабирования в диаграмме графика кендо, это можно сделать для диаграммы графиков ящиков. http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom

Answer 1

Вы можете применить те же самые методы к коробке.

DEMO

КОД:

// Minimum/maximum number of visible items 
var MIN_SIZE = 6; 
var MAX_SIZE = 18; 

// Optional sort expression 
// var SORT = { field: "val", dir: "asc" }; 
var SORT = {}; 

// Minimum distance in px to start dragging 
var DRAG_THR = 50; 

    // State variables 
    var viewStart = 0; 
    var viewSize = MIN_SIZE; 
    var newStart; 

    // Drag handler 
    function onDrag(e) { 
     var chart = e.sender; 
     var ds = chart.dataSource; 
     var delta = Math.round(e.originalEvent.x.initialDelta/DRAG_THR); 

     if (delta != 0) { 
     newStart = Math.max(0, viewStart - delta); 
     newStart = Math.min(data.length - viewSize, newStart); 
     ds.query({ 
      skip: newStart, 
      page: 0, 
      pageSize: viewSize, 
      sort: SORT 
     }); 
     } 
    } 

    function onDragEnd() { 
     viewStart = newStart; 
    } 

    // Zoom handler 
    function onZoom(e) { 
     var chart = e.sender; 
     var ds = chart.dataSource; 
     viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE); 
     ds.query({ 
      skip: viewStart, 
      page: 0, 
      pageSize: viewSize, 
      sort: SORT 
     }); 

     // Prevent document scrolling 
     e.originalEvent.preventDefault(); 
    } 

     $("#chart").kendoChart({ 
      dataSource: { 
      data: data, 
      pageSize: viewSize, 
      page: 0, 
      sort: { } 
      }, 
      title: { 
       text: "Ozone Concentration (ppm)" 
      }, 
      legend: { 
       visible: false 
      }, 
      series: [{ 
       type: "boxPlot", 
       lowerField: "lower", 
       q1Field: "q1", 
       medianField: "median", 
       q3Field: "q3", 
       upperField: "upper", 
       meanField: "mean", 
       outliersField: "outliers" 
      }], 
      categoryAxis: { 
       field: "year", 
       majorGridLines: { 
        visible: false 
       } 
      }, 
      transitions: false, 
      drag: onDrag, 
      dragEnd: onDragEnd, 
      zoom: onZoom 

     });