Question

在尝试使用$ 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();效果很好，但是我不想破坏图表并再次构建它，因为它是用其他尺寸构建的。

在AngularJS中使用$ scope更新ChartJs图表

0 个答案: