DevExtreme dxChart（）无法缩放/滚动/响应值更改（使用AngularJS）

我目前使用Dev Extreme在使用AngularJS构建的单页webapp中生成一些图。在教程Documentation-DevExtreme之后，我创建了一个模板。除了我在控制器里面写的。
以下是我的代码：DevExtreme dxChart（）无法缩放/滚动/响应值更改（使用AngularJS）

// This controller manages views in basic.html 
app.controller("basicCtrl", ["$scope", "$http", 
    function ($scope, $http) { 

    function find(str, raw) {} 
    $scope.method = "GET"; 
    $scope.url = "test.json"; 
    $scope.BindWidget = function() { 
     var data = $scope.data; 
     // console.log(data); 
     // get data 
     var peopleStreamData = find("peopleStream", data); 
     if (peopleStreamData !== null) { 
      var chartOptions = { 
       dataSource: peopleStreamData.dataSource, 
       series: peopleStreamData.series, 
       scrollBar: { 
        visible: true 
       }, 
       scrollingMode: "all", 
       zoomingMode: "all", 
      }; 
      $("#peopleStream").dxChart(chartOptions); 

      $("#whatever").dxRangeSelector({ 
       //some other options here I hid 
       behavior: { 
        callSelectedRangeChanged: "onMoving" 
       }, 
       onSelectedRangeChanged: function (e) { 
        var zoomedChart = $("#peopleStream").dxChart('instance'); 
        zoomedChart.zoomArgument(e.startValue, e.endValue); 
       } 
      }); 
     } 
    }; 

    $scope.fetch = function() { 
     $http({method: $scope.method, url: $scope.url, cache: false}). 
       success(function (data, status) { 
        $scope.status = status; 
        $scope.data = data; 
        // call the function to generate widgets 
        $scope.BindWidget(); 
       }). 
       error(function (data, status) { 
        console.log("SHIT, FAILED TO READ JSON"); 
        $scope.data = data || "Request failed"; 
        $scope.status = status; 
       }); 
    }; 

    $("document").ready($scope.fetch()); 
}]);

和HTML：

<body> 
<div id="peopleStream"></div> 
<div id="whatever"></div> 
</body>

出于某种原因，滚动条显示不出来，都不会更改在我的主图表rangeSelector改变任何东西。任何人有任何这方面的经验？

来源

2015-02-10 Benson Zhang

这很奇怪 - 在我的例子中'scrollBar：{visible：true}，scrollingMode：“all”，zoomingMode：“all”，'就足以让滚动条出现。至于'onSelectedRangeChanged' - 范围选择器的域和图表是否一致？即在图表的参数轴范围内有e.startValue和e.endValue？ – Sergey 2015-02-11 07:46:14

是的。我仍然不知道这是什么原因造成的...... – 2015-02-11 11:34:05

你试过他们的支持中心吗？ – Sergey 2015-02-11 13:30:16

Pasting my code that worked for me 


var dataSource = [ 
      { arg: 10, y1: -12, y2: 10, y3: 32 }, 
      { arg: 20, y1: -32, y2: 30, y3: 12 }, 
      { arg: 40, y1: -20, y2: 20, y3: 30 }, 
      { arg: 50, y1: -39, y2: 50, y3: 19 }, 
      { arg: 60, y1: -10, y2: 10, y3: 15 }, 
      { arg: 75, y1: 10, y2: 10, y3: 15 }, 
      { arg: 80, y1: 30, y2: 100, y3: 130 }, 
      { arg: 90, y1: 40, y2: 110, y3: 140 }, 
      { arg: 100, y1: 50, y2: 90, y3: 90 }, 
      { arg: 110, y1: 40, y2: 145, y3: 120 }, 
      { arg: 120, y1: -12, y2: 10, y3: 32 }, 
      { arg: 130, y1: -32, y2: 30, y3: 12 }, 
      { arg: 140, y1: -20, y2: 20, y3: 30 }, 
      { arg: 150, y1: -12, y2: 10, y3: 32 }, 
      { arg: 160, y1: -32, y2: 30, y3: 12 }, 
      { arg: 170, y1: -20, y2: 20, y3: 30 }, 
      { arg: 180, y1: -39, y2: 50, y3: 19 }, 
      { arg: 190, y1: -10, y2: 10, y3: 15 }, 
      { arg: 200, y1: 10, y2: 10, y3: 15 }, 
      { arg: 210, y1: 30, y2: 100, y3: 130 }, 
      { arg: 220, y1: 40, y2: 110, y3: 140 }, 
      { arg: 230, y1: 50, y2: 90, y3: 90 }, 
      { arg: 240, y1: 40, y2: 145, y3: 120 }, 
      { arg: 250, y1: -12, y2: 10, y3: 32 }, 
      { arg: 260, y1: -32, y2: 30, y3: 12 }, 
      { arg: 270, y1: -20, y2: 20, y3: 30 }, 
      { arg: 280, y1: -12, y2: 10, y3: 32 }, 
      { arg: 290, y1: -32, y2: 30, y3: 12 }, 
      { arg: 300, y1: -20, y2: 20, y3: 30 }, 
      { arg: 310, y1: -39, y2: 50, y3: 19 }, 
      { arg: 320, y1: -10, y2: 10, y3: 15 }, 
      { arg: 330, y1: 10, y2: 10, y3: 15 }, 
      { arg: 340, y1: 30, y2: 100, y3: 130 }, 
      { arg: 350, y1: 40, y2: 110, y3: 140 }, 
      { arg: 360, y1: 50, y2: 90, y3: 90 }, 
      { arg: 370, y1: 40, y2: 145, y3: 120 }, 
      { arg: 380, y1: -12, y2: 10, y3: 32 }, 
      { arg: 390, y1: -32, y2: 30, y3: 12 }, 
      { arg: 400, y1: -20, y2: 20, y3: 30 }, 
      { arg: 410, y1: -12, y2: 10, y3: 32 }, 
      { arg: 420, y1: -32, y2: 30, y3: 12 }, 
      { arg: 430, y1: -20, y2: 20, y3: 30 }, 
      { arg: 440, y1: -39, y2: 50, y3: 19 }, 
      { arg: 450, y1: -10, y2: 10, y3: 15 }, 
      { arg: 460, y1: 10, y2: 10, y3: 15 }, 
      { arg: 470, y1: 30, y2: 100, y3: 130 }, 
      { arg: 480, y1: 40, y2: 110, y3: 140 }, 
      { arg: 490, y1: 50, y2: 90, y3: 90 }, 
      { arg: 500, y1: 40, y2: 145, y3: 120 }, 
      { arg: 510, y1: -12, y2: 10, y3: 32 }, 
      { arg: 520, y1: -32, y2: 30, y3: 12 }, 
      { arg: 530, y1: -20, y2: 20, y3: 30 }, 
     ]; 

     var series = [{ 
       argumentField: 'arg', 
       valueField: 'y1' 
      }]; 

     var zoomedChart = $("#chartContainer").dxChart({ 
      argumentAxis: { 
       indentFromMin: 0.02, 
       indentFromMax: 0.02 
      }, 
      dataSource: dataSource, 
      series: series, 
      legend:{ 
       visible: false 
      } 
     }).dxChart("instance"); 

     //zoomedChart.zoomArgument(75, 130); 

     $("#rangeSelectorContainer").dxRangeSelector({ 
      size: { 
       height: 120 
      }, 
      margin: { 
       left: 10 
      }, 
      scale: { 
       divisionValue: 1, 
       minRange: 2 
      }, 
      dataSource: dataSource, 
      /*selectedRange: { 
       startValue: 75, endValue: 130 
      },*/ 
      chart: { 
       series: series 
      }, 
      behavior: { 
       callSelectedRangeChanged: "onMoving" 
      }, 
      indent: { 
       left: 50, 
       right: 30 
      }, 
      selectedRangeChanged: function (e) { 
       var zoomedChart = $("#chartContainer").dxChart('instance'); 
       zoomedChart.zoomArgument(e.startValue, e.endValue); 
      } 
     });

来源

2015-11-10 10:16:00

DevExtreme dxChart（）无法缩放/滚动/响应值更改（使用AngularJS）

回答

相关问题