Javascript DevExtreme dxChart()无法缩放/滚动/响应值更改(使用AngularJS)
我目前正在使用devextreme在我用AngularJS构建的单页webapp中生成一些图形。 在上了教程之后,我创建了一个与之类似的模板。除了我把它写在我的控制器里。Javascript DevExtreme dxChart()无法缩放/滚动/响应值更改(使用AngularJS),javascript,angularjs,devextreme,Javascript,Angularjs,Devextreme,我目前正在使用devextreme在我用AngularJS构建的单页webapp中生成一些图形。 在上了教程之后,我创建了一个与之类似的模板。除了我把它写在我的控制器里。 以下是我的代码: // This controller manages views in basic.html app.controller("basicCtrl", ["$scope", "$http", function ($scope, $http) { function find(str, raw) {
以下是我的代码:
// 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也没有更改主图表中的任何内容。
有人有过这样的经历吗?这很奇怪-在我的示例中,
滚动条:{visible:true},滚动模式:“all”,缩放模式:“all”,滚动条显示就足够了。至于onSelectedRangeChanged
-范围选择器和图表的域是否一致?i、 e.起始值和结束值是否在图表参数轴的范围内?是的。我仍然不知道是什么原因…你有没有试过他们的支持中心?是的。在这里问之前试过了。告诉我给他们发封电子邮件。没有得到答复。
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);
}
});