angular-chart.js：折线图的 pointHoverBorderColor 属性问题

Question

我正在使用输入颜色作为对象，但是属性 "pointHoverBorderColor" 无法使用 :

angular : 1.5.3,

chart.js : 2.6.0,

angular-chart.js : 1.1.1.

vm.colors = [ { backgroundColor: "rgba(159,204,0, 0.2)", 
pointBackgroundColor: "rgba(159,204,0, 1)", 
pointHoverBackgroundColor: "rgba(159,204,0, 0.8)", 
borderColor: "rgba(159,204,0, 1)", 
pointBorderColor: '#fff', 
pointHoverBorderColor: "rgba(159,204,0, 1)" },
"rgba(250,109,33,0.5)",
"#9a9a9a","rgb(233,177,69)" ];

为

<canvas id="line" class="chart chart-line" chart-data="vm.data" 
chart-colors="vm.colors" chart-labels="vm.labels" chart-series="vm.series" 
chart-options="vm.options" chart-dataset-override="vm.datasetOverride" 
chart-click="vm.onClick"></canvas>

下图，悬停时该点保持黑色：

Answer 1

您正在为错误的控制器分配数据集选项。而不是将其分配给 vm.colors ，您需要将其分配给 vm.datasetOverride ，就像这样...

vm.datasetOverride = [{
   backgroundColor: "rgba(159,204,0, 0.2)",
   pointBackgroundColor: "rgba(159,204,0, 1)",
   pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
   borderColor: "rgba(159,204,0, 1)",
   pointBorderColor: '#fff',
   pointHoverBorderColor: "rgba(159,204,0, 1)",
   fill: false
}];

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var app = angular.module('app', ['chart.js']);

app.controller("LineCtrl", ['$scope', function(vm) {
   vm.labels = ["January", "February", "March", "April", "May", "June"];
   vm.data = [
      [65, 59, 80, 81, 56, 55]
   ];
   vm.datasetOverride = [{
      backgroundColor: "rgba(159,204,0, 0.2)",
      pointBackgroundColor: "rgba(159,204,0, 1)",
      pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
      borderColor: "rgba(159,204,0, 1)",
      pointBorderColor: '#fff',
      pointHoverBorderColor: "rgba(159,204,0, 1)",
      fill: false
   }];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="LineCtrl">
    <canvas id="line" class="chart chart-line" chart-data="data" chart-colors="colors" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
</div>

angular-chart.js：折线图的 pointHoverBorderColor 属性问题

angular-chart.js : issue with pointHoverBorderColor property for line chart

angularjs

chart.js

angular-chart

chart.js2

angular-chart.js：折线图的 pointHoverBorderColor 属性 问题

angular-chart.js : issue with pointHoverBorderColor property for line chart

angularjs

chart.js

angular-chart

chart.js2

angular-chart.js：折线图的 pointHoverBorderColor 属性问题