1

我有一个用 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 个值用红色设置点的颜色，用另一种颜色设置其他点。

谢谢。

4

4 回答 4

2

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

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

例子：

(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();
    });
  });  
})();
<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>

于 2015-06-14T11:48:24.380 回答
1

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

但是一旦渲染完成，您可以使用动画完成处理程序来更新点颜色。您可以使用 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()
    } }); 
  })

Plunkr - http://plnkr.co/edit/ggqcmpkhFXsinnm9aDbM?p=preview

于 2015-06-14T12:47:13.727 回答
1

利用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
        }
      ]
    }
于 2017-03-23T15:12:34.243 回答
0

我找到了另一种方法，但这不是最好的解决方案。

在 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],

在 Angular 控制器中，我输入了这一行：

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

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

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

于 2015-06-14T21:01:25.597 回答