Обновите диаграмму ChartJs, используя $ scope в AngularJS - PullRequest
1 голос
/ 12 марта 2019

У меня возникают проблемы при обновлении данных диаграммы с использованием $ scope.Я знаю, что есть функция для обновления диаграмм myChart.update();, но я не могу обновить диаграмму, когда помещаю ее в $scope.

. Следующий код получает данные диаграммы, а затем пытается обновитьдиаграмма.Проблема возникает на $scope.lineChart.update();.Похоже, что chartjs не может обнаружить какие-либо изменения.

Следующий код выполняется после запуска выбора, поэтому диаграмма имеет исходные данные, а следующий код просто пытается их обновить.

не работает : $scope.lineChart.update();

        $scope.getLineChartMaxData().then(function () {
          $scope.getLineChartMinData().then(function () {
            $scope.lineChart.update();
        });
    });

Функция диаграммы:

$scope.fillLineChart = function () {
    console.log("FILLING LINE CHART");
    const brandProduct = 'rgba(0,181,233,0.5)'
    const brandService = 'rgba(0,173,95,0.5)'

    var data1 = $scope.lineChartMaxWeekData;
    var data2 = $scope.lineChartMinWeekData;
    var maxValue1 = Math.max.apply(null, data1)
    var maxValue2 = Math.max.apply(null, data2)
    var minValue1 = Math.min.apply(null, data1)
    var minValue2 = Math.min.apply(null, data2)
    var maxValue;
    var minValue;
    if (maxValue1 >= maxValue2) {
        maxValue = maxValue1;
    } else {
        maxValue = maxValue2;
    }
    if (minValue1 >= minValue2) {
        minValue = minValue2;
    } else {
        minValue = minValue1;
    }
    $scope.minValue = minValue;
    $scope.maxValue = maxValue;
    var ctx = document.getElementById("recent-rep-chart");
    if (ctx) {
        ctx.height = 250;
        $scope.lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: $scope.lineChartMaxWeekLabels,
                datasets: [{
                        label: 'Valor',
                        backgroundColor: brandService,
                        borderColor: 'transparent',
                        pointHoverBackgroundColor: '#fff',
                        borderWidth: 0,
                        data: data1

                    },
                    {
                        label: 'My Second dataset',
                        backgroundColor: brandProduct,
                        borderColor: 'transparent',
                        pointHoverBackgroundColor: '#fff',
                        borderWidth: 0,
                        data: data2

                    }
                ]
            },
            options: {
                maintainAspectRatio: true,
                legend: {
                    display: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea: true,
                            color: '#f2f2f2'
                        },
                        ticks: {
                            fontFamily: "Poppins",
                            fontSize: 12
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            maxTicksLimit: 5,
                            stepSize: 50,
                            max: maxValue,
                            fontFamily: "Poppins",
                            fontSize: 12
                        },
                        gridLines: {
                            display: true,
                            color: '#f2f2f2'

                        }
                    }]
                },
                elements: {
                    point: {
                        radius: 0,
                        hitRadius: 10,
                        hoverRadius: 4,
                        hoverBorderWidth: 3
                    }
                }


            }
        });
    }
};

ОБНОВЛЕНИЕ: $scope.lineChart.destroy(); работает хорошо,но я не хочу разрушать диаграмму и строить ее заново, потому что она построена с другими размерами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...