Question

我正在为我的简单应用创建一些图表。

虽然已创建图表但未在其上应用颜色。即使我使用默认选项进行检查，它们也不适用于它。

但奇怪的是，同一页面中的另一张图表有颜色。

此图表画布

<canvas id="bar" class="chart chart-bar" chart-options="options"
                        chart-data="data" chart-labels="labels" 
                        chart-colours="colours" height="100px">  </canvas>

这是它的控制器

app.controller("charByMonth", function ($scope,$http) {

$scope.totalAmount=0;
  $scope.labels = [];
  $scope.series = ['Amount'];
  $scope.data = [];
  $scope.colours = ['#803690','#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'];
  $scope.options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    };

  $scope.showCustomizedChart = function(){

        $scope.labels=[];
        $scope.data = [];

        $http.get('http://localhost:8080/getAmountByMonth/'+$scope.selectedYear+'/'+$scope.selectedStartMonth+'/'+$scope.selectedEndMonth)
        .then(function(response){
            for(var i=$scope.selectedStartMonth;i<=$scope.selectedEndMonth;i++){
                switch(i){
                case 1:
                    $scope.labels.push("JAN");
                    break;
                case 2:
                    $scope.labels.push("FEB");
                    break;
                case 3:
                    $scope.labels.push("MAR");
                    break;
                case 4:
                    $scope.labels.push("APR");
                    break;
                case 5:
                    $scope.labels.push("MAY");
                    break;
                case 6:
                    $scope.labels.push("JUN");
                    break;
                case 7:
                    $scope.labels.push("JUL");
                    break;
                case 8:
                    $scope.labels.push("AUG");
                    break;
                case 9:
                    $scope.labels.push("SEP");
                    break;
                case 10:
                    $scope.labels.push("OCT");
                    break;
                case 11:
                    $scope.labels.push("NOV");
                    break;
                case 12:
                    $scope.labels.push("DEC");
                    break;
                }
            }

            $scope.data.push(response.data);
            console.log($scope.data);
        });
    }

});

这是我得到的图表

在此图表之前的同一页面中，我正在创建另一个图表，该图表是丰富多彩的

这是该图表的图像

这是它的控制器

app.controller("BarCtrl", function ($scope,$http) {
  $scope.totalAmount=0;
  $scope.labels = [];
  $scope.series = ['Amount'];
  $scope.colours = ['#803690','#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'];
  $scope.data = [];
  $scope.options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    };

  getYearsData = function(){
      $http.get('http://localhost:8080/getAmountByYear').then(function(response){
          var wholedata = response.data;
          angular.forEach(wholedata,function(value,key){
            $scope.totalAmount = value.totalAmount;
            console.log($scope.totalAmount);
            var checkSize = value.years.length;
            if($scope.labels.length !== checkSize){
                for(var i=0;i<checkSize;i++){
                    $scope.labels.push(value.years[i].toString());
                }
                console.log($scope.labels);
            }

            var checkSizeAmount = value.amount.length;
            if($scope.data.length !== checkSizeAmount){
                for(var i=0;i<checkSizeAmount;i++){
                    $scope.data.push(value.amount[i]);
                }

                console.log($scope.data);
            }

          });
      });
  }


  getYearsData();
});

我的第二个问题是图表从数据填充错误。

这是数据

这就是我在图表中得到的

Answer 1

尝试用图表颜色

替换图表颜色

角度图颜色不会改变

1 个答案: