单击单选按钮时折线图未显示数据

Question

I have created a line chart using chart.js and there is radio button as well, so it should show data according to the selected radio button.

HTML code:

<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>

My controller code:

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
        };
    }

}

So by default, it is showing the quarter wise graph which is fine, but when I am selecting the month-wise from the radio button the graph is not changing, and on selecting quarter-wise from the radio button it is not taking any values from inside the function, only default value is shown on the graph (which is defined above the functions)

So where I am doing wrong.Please Help

Thanks

Answer 1

You could try using arrow functions (() => {}) instead of anonymous functions function {} or .bind(this) on anonymous functions. Maybe you access wrong this when calling it from inside an anonymous function.

You could also try updating the data directly on the chart.js object.