3

列の値に応じて棒の色が異なるangular-chart.jsを使用して棒グラフを作成しています。

値が 5 を超える列は赤色でなければならず、緑色でなければなりません。正常に動作していますが、棒の 1 つにマウスを合わせると、その色が変わります (おそらく棒グラフの前の棒の値によって異なります)。これは非常に面倒です。

どうすればこの問題を解決できますか?

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"
                     }
         }
        }
]);

このプランカーが同じ問題を抱えているのを見ることができます棒グラフのバーに異なる色を設定する

SO に関する 1 つの投稿を読んで、更新メソッドを呼び出すように提案された人もいましたが、JS ファイルから更新メソッドを呼び出すにはどうすればよいですか?

4

0 に答える 0