我目前正在使用 Dev Extreme 在我用 AngularJS 构建的单页 Web 应用程序中生成一些图表。
按照 Documentation-DevExtreme 上的教程进行操作我创建了一个类似的模板。除了我把它写在我的 Controller 中。
以下是我的代码:
// 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);
}
});
关于javascript - DevExtreme dxChart() 无法缩放/滚动/响应值更改(使用 AngularJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28428383/