javascript - ChartJS - 覆盖属性(AngularJS)

Question

我在angularjs中有简单的chartjs，我想覆盖一些选项，比如borderWidth、backgroundColor等等......

我试过了 ...
HTML

<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="mainCtrl.data" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options" chart-dataset-override="mainCtrl.datasetOverride">
      </canvas>
</div>

JS

angular.module('chartDemo', ['chart.js'])
    .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      //animation: false,
      //responsive: false
    });
  }])
    .controller('MainController', MainController);

function MainController($scope, $timeout) {
  var chart = this;
  
  chart.labels = ["Stack", "Over", "Flow"];
  chart.data = [10, 30, 70];
  chart.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }
 
/*   chart.datasetOverride = [{borderWidth: 2 }, {borderWidth: 5 },{borderWidth: 10 } ]; */
  
  
 /*  chart.datasetOverride = [{hoverBackgroundColor: '#ff6384' }, {hoverBackgroundColor: '#45b7cd' },{hoverBackgroundColor: '#ff8e72' } ]; */
  
  
  chart.datasetOverride = [{backgroundColor: '#ccc' }, {backgroundColor: '#ddd' },{backgroundColor: '#fff' } ];
  
  
 
}

MainController.$inject = ['$scope', '$timeout'];

我已经尝试在他们的文档中到处查看( https://jtblin.github.io/angular-chart.js/ )，但看不到这样做。
有什么建议让我让它工作吗？
fiddle
https://jsfiddle.net/bheng/csupfywt/

Answer 1

引用源代码:

function getChartData (type, scope) {
  var colors = getColors(type, scope);
  return Array.isArray(scope.chartData[0]) ?
    getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
    getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
}
...
function getData (labels, data, colors, datasetOverride) {
  var dataset = {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: colors.map(function (color) {
        return color.pointBackgroundColor;
      }),
      hoverBackgroundColor: colors.map(function (color) {
        return color.backgroundColor;
      })
    }]
  };
  if (datasetOverride) {
    angular.merge(dataset.datasets[0], datasetOverride);
  }
  return dataset;
}

因此，如果您的 data只是一个数字数组，datasetOverride应该是一个对象而不是数组:

chart.datasetOverride = {
  borderWidth: 10, 
  backgroundColor: ["#f00", "#00f", "#000"],
  hoverBackgroundColor: ["#f0f", "#0ff", "#ff0"]
};

Fiddle
注:仅对于颜色，您可以将表示颜色的对象数组传递给 chart-colors但奇怪的是他们拿了pointBackgroundColor如backgroundColor和 backgroundColor如hoverBackgroundColor :

chart.colors = [
  {
    backgroundColor: "#0f0",
    pointBackgroundColor: "#000",
  },
  {
    backgroundColor: "#f0f",
    pointBackgroundColor: "#00f",
  },
  {
    backgroundColor: "#ff0",
    pointBackgroundColor: "#f00",
  },
]; 

Fiddle