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

我已经使用chart.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>

因此，默认情况下，它显示的是季度图，这很好，但是当我从单选按钮中选择月份图时，图表不会改变，从单选按钮中选择季度图时，它不会从函数内部获取任何值，在函数上方定义的图上只显示默认值

那么我哪里做错了。请帮忙

---

谢谢

您可以尝试使用箭头功能 =>{}而不是匿名函数函数{}或.bindthis。当从匿名函数内部调用它时，可能访问错误

您还可以尝试直接在chart.js对象上更新数据

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

}