Question

我正在使用 angular-chart.js 创建条形图，其中条形图具有不同的颜色，具体取决于列的值。

假设值大于五的列应为红色，否则为绿色。它的工作正常，但当我鼠标移动到其中一个条形图时，它的颜色会发生变化（可能取决于条形图中前一个条形图的值），这非常烦人。

我该怎样摆脱这个问题？

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具有相同的问题Setting different colors for bars in Bar Chart

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

Chart.js鼠标悬停时条形图颜色的变化

0 个答案: