使 angular-chartjs 响应 UI-Grid
Making angular-chartjs responsive with UI-Grid
我正在使用 angular-chart.js (http://jtblin.github.io/angular-chart.js/) module and trying to make the chart data editable with UI-Grid module (http://ui-grid.info/docs/#/tutorial/201_editable)。
我能够编辑数据,但不确定如何在编辑单元格时响应地更新图表。
我正在与此抗争,因为 sometime.I 感谢对此的任何想法。
这是我目前得到的:
app.controller("myController", function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.gridOptions = {
columnDefs: [
{ name: 'A', width: '50%', enableCellEdit: true },
{ name: 'B', width: '50%', enableCellEdit: true }
],
data: [{
"A": 65,
"B": 28
},
{
"A": 59,
"B": 48
},
{
"A": 80,
"B": 40
},
{
"A": 81,
"B": 19
},
{
"A": 56,
"B": 86
},
{
"A": 55,
"B": 27
},
{
"A": 40,
"B": 90
}
]
};
var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesA.push($scope.gridOptions.data[i].A);
}
console.log(seriesA);
var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesB.push($scope.gridOptions.data[i].B);
}
console.log(seriesB);
$scope.data = [
seriesA,
seriesB
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
这是 HTML 片段:
<div id="grid1" class="panel" ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick"></canvas>
只需在 canvas 中指定 data="gridOptions.data" ,当数据发生变化时它会自动更新。
您只设置了一次 data
。要使这个动态化,你需要做的就是将它指向一个从网格数据计算数据的范围方法,就像这样
脚本更改
定义一个函数来根据网格数据计算图表数据结构。使用它来初始化图形并在单元格编辑完成后更新图形
var getData = function () {
var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesA.push($scope.gridOptions.data[i].A);
}
console.log(seriesA);
var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesB.push($scope.gridOptions.data[i].B);
}
console.log(seriesB);
return [
seriesA,
seriesB
];
}
$scope.data = getData();
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function () {
$scope.data = getData();
});
};
现在,编辑网格条目将自动更新图表。
我正在使用 angular-chart.js (http://jtblin.github.io/angular-chart.js/) module and trying to make the chart data editable with UI-Grid module (http://ui-grid.info/docs/#/tutorial/201_editable)。 我能够编辑数据,但不确定如何在编辑单元格时响应地更新图表。 我正在与此抗争,因为 sometime.I 感谢对此的任何想法。
这是我目前得到的:
app.controller("myController", function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.gridOptions = {
columnDefs: [
{ name: 'A', width: '50%', enableCellEdit: true },
{ name: 'B', width: '50%', enableCellEdit: true }
],
data: [{
"A": 65,
"B": 28
},
{
"A": 59,
"B": 48
},
{
"A": 80,
"B": 40
},
{
"A": 81,
"B": 19
},
{
"A": 56,
"B": 86
},
{
"A": 55,
"B": 27
},
{
"A": 40,
"B": 90
}
]
};
var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesA.push($scope.gridOptions.data[i].A);
}
console.log(seriesA);
var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesB.push($scope.gridOptions.data[i].B);
}
console.log(seriesB);
$scope.data = [
seriesA,
seriesB
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
这是 HTML 片段:
<div id="grid1" class="panel" ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick"></canvas>
只需在 canvas 中指定 data="gridOptions.data" ,当数据发生变化时它会自动更新。
您只设置了一次 data
。要使这个动态化,你需要做的就是将它指向一个从网格数据计算数据的范围方法,就像这样
脚本更改
定义一个函数来根据网格数据计算图表数据结构。使用它来初始化图形并在单元格编辑完成后更新图形
var getData = function () {
var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesA.push($scope.gridOptions.data[i].A);
}
console.log(seriesA);
var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesB.push($scope.gridOptions.data[i].B);
}
console.log(seriesB);
return [
seriesA,
seriesB
];
}
$scope.data = getData();
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope, function () {
$scope.data = getData();
});
};
现在,编辑网格条目将自动更新图表。