DevExtreme dxChart()无法缩放/滚动/响应值更改(使用AngularJS)
DevExtreme dxChart() not able to zoom/scroll/respone to value changes (AngularJS used)
我目前正在使用Dev Extreme在我用AngularJS构建的单页Web应用程序中生成一些图。按照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也没有更改主图表中的任何内容。有人有过这样的经历吗?
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);
}
});
相关文章:
- 使用AngularJS中的筛选器更新给定的表
- 使用angularjs验证文本框中的电子邮件
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 如何使用AngularJs禁用ng选项中的选项
- 我无法使用angularJs($http)访问服务器
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 使用angularjs中的rest调用通过id获取数据
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 使用AngularJS从时间戳中获取工作日
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 使用angularjs列出JSON中的字段值
- 如何在范围值更改时使用 angularJs 更新 UI
- 如何使用AngularJS显示按钮或锚标记值
- 如何使用angularjs在iframe中嵌入来自数据库的视频链接
- 如何使用AngularJS在点击身体内部任何位置时显示弹出窗口
- 如何使用angularjs构建交互式滚动着陆页
- 如何使用angularJS从json的对象数组中显示和计数实体