Линейный график не показывает данные по нажатию переключателя

Question

Я создал линейную диаграмму, используя диаграмму. js, а также есть переключатель, поэтому он должен показывать данные в соответствии с выбранным переключателем.

HTML код:

<div ng-controller="lineChartCtrl as chart">
    <div>
        <input type="radio"  value="Month"  name="optionsRadios" ng-model="graph" ng-click="months()"> Month
    </div>
     <div>
        <input type="radio" checked= "true" value="Quarter"  name="optionsRadios" ng-model="graph" ng-click="quarters()" >Quarter
     </div>
    <canvas  linechart options="chart.lineOptions" data="chart.lineData" height="140" responsive=true >
     </canvas>
</div>

Код моего контроллера:

function lineChartCtrl($scope,$http,$state)
{
   this.lineOptions = {
        scaleShowGridLines : true,
        scaleGridLineColor : "rgba(0,0,0,.05)",
        scaleGridLineWidth : 1,
        bezierCurve : true,
        bezierCurveTension : 0.4,
        pointDot : true,
        pointDotRadius : 4,
        pointDotStrokeWidth : 1,
        pointHitDetectionRadius : 20,
        datasetStroke : true,
        datasetStrokeWidth : 2,
        datasetFill : true
    };
    this.lineData = {
        labels: ["Q2-18","Q3-18","Q4-18","Q1-19"],
        datasets: [
            {
                label: "Example dataset",
                fillColor: "rgba(26,179,148,0.5)",
                strokeColor: "rgba(26,179,148,0.7)",
                pointColor: "rgba(26,179,148,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: quarter_score
            },
        ]   
    };



    $scope.quarters = function(){
        this.lineData = {
            labels: ["Q2-18","Q3-18","Q4-18","Q1-19"],
            datasets: [
                {
                    label: "Quarter_Wise",
                    fillColor: "rgba(26,179,148,0.5)",
                    strokeColor: "rgba(26,179,148,0.7)",
                    pointColor: "rgba(26,179,148,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(26,179,148,1)",
                    data: quarter_score
                },

            ]
        };
        this.lineOptions = {
            scaleShowGridLines : true,
            scaleGridLineColor : "rgba(0,0,0,.05)",
            scaleGridLineWidth : 1,
            bezierCurve : true,
            bezierCurveTension : 0.4,
            pointDot : true,
            pointDotRadius : 4,
            pointDotStrokeWidth : 1,
            pointHitDetectionRadius : 20,
            datasetStroke : true,
            datasetStrokeWidth : 2,
            datasetFill : true
        };
    }
    $scope.months = function(){
        console.log("inside month");
        this.lineData = {
            labels: ["APR-18","MAY-18","JUN-18","JUL-18","AUG-18","SEP-18","OCT-18","NOV-18","DEC-18","JAN-19","FEB-19","MAR-19"],
            datasets: [
                {
                    label: "Month_Wise",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(26,179,148,1)",
                    data: month_score
                },

            ]
        };
        this.lineOptions = {
            scaleShowGridLines : true,
            scaleGridLineColor : "rgba(0,0,0,.05)",
            scaleGridLineWidth : 1,
            bezierCurve : true,
            bezierCurveTension : 0.4,
            pointDot : true,
            pointDotRadius : 4,
            pointDotStrokeWidth : 1,
            pointHitDetectionRadius : 20,
            datasetStroke : true,
            datasetStrokeWidth : 2,
            datasetFill : true
        };
    }

}

Таким образом, по умолчанию отображается квартальный график, что хорошо, но когда я выбираю помесячный график из переключателя, график не отображается изменяясь, и при выборе переключателя по четвертям он не принимает никаких значений внутри функции, на графике отображается только значение по умолчанию (которое определено над функциями)

Так, где я делаю Неправильно. Пожалуйста, помогите

Спасибо

Answer 1

Вы можете попробовать использовать функции-стрелки (() => {}) вместо анонимных функций function {} или .bind(this) в анонимных функциях. Возможно, вы обращаетесь к неправильному this при вызове изнутри анонимной функции.

Вы также можете попробовать обновить данные непосредственно на объекте chart.js.