我目前使用 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 也没有改变我的主图表中的任何内容。有人有这方面的经验吗?