3

我正在使用angular-chart.js创建一个条形图，其中条形图根据列的值具有不同的颜色。

假设值超过 5 的列应为红色，否则为绿色。它工作正常，但是当我将鼠标悬停在其中一个条上时，它的颜色会发生变化（可能取决于条形图中前一个条的值），这很烦人。

我怎样才能摆脱这个问题？

HTML： 

  <head>

    <script src="Chart.js"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="chart-angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="chartMaker">
    <canvas id="locationBar" class="chart chart-bar" data="chartParams.votes"
           labels="chartParams.listOfLocations" series="chartParams.series"
           colours="chartParams.colours" options="chartParams.options">

    </canvas>
  </body>

</html>

我正在根据条件为每个条设置颜色

var graph = angular.module('graph', ['chart.js'], function(){});

graph.controller('chartMaker',["$scope",
        function($scope){
          $scope.chartParams = {
        listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
        votes: [[5,10,6,7,2,3]],
        series: ["Nice Places"],
                colours: [{fillColor:[]}],
        options: {barShowStroke : false}
      };

     for(i=0;i<$scope.chartParams.votes[0].length;i++){
           if($scope.chartParams.votes[0][i] > 5){
                         $scope.chartParams.colours[0].fillColor[i]="#FF0000"
                     }else{
                         $scope.chartParams.colours[0].fillColor[i]="#00FF00"
                     }
         }
        }
]);

你可以看到这个 plunker 有同样的问题在条形图中为条形设置不同的颜色

我在 SO 上阅读了一篇帖子，其中有人建议调用 update 方法，但是如何从我的 JS 文件中调用 update 方法？

4

0 回答 0