Question

我正在使用angular-chart.js（http://jtblin.github.io/angular-chart.js/）模块并尝试使用UI-Grid模块（http://ui-grid.info/docs/#/tutorial/201_editable）编辑图表数据。我能够编辑数据，但不知道如何在编辑单元格时响应性地更新图表。我有一段时间与之斗争。我会对此有任何想法。

这是我到目前为止所得到的：

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>

Answer 1

只需指定data =＆＃34; gridOptions.data＆＃34;在您的画布中，当数据发生变化时，它会自动更新。

使用UI-Grid使angular-chartjs响应

1 个答案: