Делаем angular-chartjs отзывчивым с помощью UI-Grid

Я использую 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>

chart.js angular-chart
person Dynos    schedule 11.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы устанавливаете 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();
    });
};

Теперь редактирование записей сетки автоматически обновит диаграмму.

person potatopeelings    schedule 14.08.2015
comment
Решение имеет смысл. Однако похоже, что в angularjs зацикливается бесконечный цикл. - person Dynos; 18.08.2015
comment
Обновлено. Забыл проверить консоль. Ваше здоровье! - person potatopeelings; 18.08.2015

arrow_upward
0
arrow_downward

Просто укажите data = "gridOptions.data" в своем холсте, и он будет автоматически обновляться при изменении данных.

person GSP59    schedule 12.08.2015
comment
В отладчике я вижу, что диаграмма пытается обновить, но я вижу ошибку Uncaught TypeError: Cannot read property 'draw' of undefined error, когда я это делаю. Я думаю, что проблема в gridoptions.data находится в формате json, а chartjs ищет формат массива. - person Dynos; 12.08.2015
comment
Да вот в чем проблема! - person GSP59; 12.08.2015