Question

我有一个用AngularJS制作的折线图 - http://jtblin.github.io/angular-chart.js/#getting_started - Chart.js。

<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick" options="options">
</canvas> 

$scope.labels = labels_filtered;
$scope.series = [word];
$scope.data = [_.values(response.graph_values)];

是否可以根据某些条件为图表中的某个点设置不同的颜色？（例如：对于值> 10的点设置红色，否则设置颜色为绿色）

[编辑]链接到小型演示：http://plnkr.co/edit/S0W5wPznMu4bCxRjOppl?p=preview。我想要的是用80,81值用红色设置点的颜色，用另一种颜色设置其他点。

感谢。

Answer 1

您必须手动设置图表的点颜色：

myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;

示例：

＆＃13;

(function() {
  var app = angular.module("Line_Chart", ["chart.js"]);
  app.controller('LineChartController', function($scope) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series B'];
   
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40]  
    ];
    
    $scope.onClick = function(points, evt) {
      console.log(points, evt);
    };
    
    $scope.$on("create", function(evt, chart) {
      chart.datasets[0].points[4].fillColor = "red";
      chart.update();
    });
  });  
})();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://rawgit.com/jtblin/angular-chart.js/02639948a90edf92f018804ec25baea9fef71a84/angular-chart.js"></script>

    <body ng-app="Line_Chart">
      <div ng-controller="LineChartController">
        <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick" options="options" colours="colours" chart="mychart">
        </canvas>
      </div>
    </body>

＆＃13;

Answer 2

我不认为角度版本会直接暴露图表点。

但是，渲染完成后，您可以使用动画完整处理程序更新点颜色。您可以使用angular-chart.js提供的ChartJsProvider设置动画完成处理程序

  var app = angular.module("Line_Chart", ["chart.js"]).config(function(ChartJsProvider) { 
    ChartJsProvider.setOptions({ onAnimationComplete: function(){
      this.datasets[0].points[2].fillColor = "red";
      this.update()
    } }); 
  })

普兰克 - http://plnkr.co/edit/ggqcmpkhFXsinnm9aDbM?p=preview

Answer 3

利用chart.datasets[0].points[4].fillColor = "red";类型代码的解决方案不再适用于chart.js v2 +。

然而，数据集属性（如pointBorderColor）接受数组，这可能非常有用。这使您可以创建颜色数组（或其他属性），并可以为特定数据点设置不同的属性。您也可以稍后访问数组中的属性并进行更改。

示例：

data: {
      labels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
      datasets: [
        {
          fill: false,
          lineTension: 0.4,
          backgroundColor: [ "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)" ],
          borderColor: "rgba(117, 201, 196, 0.8)",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
          pointBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff" ],
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
          pointHitRadius: 10,
          data: [ 1, 3, 6, 12, 18, 28, 17, 10, 3, 2 ],
          spanGaps: false
        }
      ]
    }

Answer 4

我找到了另一种方法，但它不是最佳解决方案。

在Chart.js文件中，我通过将[index]放到pointColor对象来改变了这部分代码：

helpers.each(dataset.data,function(dataPoint,index){   
   datasetObject.points.push(new this.PointClass({
      value : dataPoint,
      label : data.labels[index],
      datasetLabel: dataset.label,
      strokeColor : dataset.pointStrokeColor,
      fillColor : dataset.pointColor[index],

在角度控制器中我把这一行：

$scope.colours = [{pointColor:colours, fillColor: "#E7EDF0", strokeColor: "#A9C4D2"}];

其中colors是图表中每个点的颜色数组。

*为了确保它也接受单个值，一个解决方案是检查对象数据类型.pointColor是并将其用作单个值或数组。

更改特定ChartJS的颜色 - AngularChartJS点

4 个答案: