Question

我目前正在使用Dev Extreme在我使用AngularJS构建的单页webapp中生成一些图表。按照Documentation-DevExtreme的教程，我创建了一个类似的模板。除了我在我的控制器里面写的以下是我的代码：

// 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更改主图表中的任何内容。有人有这方面的经验吗？

Answer 1

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);
            }
        });

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

1 个答案: