Angular js饼图样式

debugcn 发表于 Dev

埃默罗夫

如何从angularjs-chart 设置饼图样式，使其看起来像这样：

angularjs-chart上有一些例子，这个很好，例如：

这个适合我的需要，我只需要改变颜色并使线条更细。就像上面那个。

我确实尝试过图表颜色和图表选项。第一个根本不起作用，我不确定如何使用选项。

这是代码：

在控制器中：

app.controller('DashboardController', function DashboardController ($scope) {
    $scope.labels = ["Download Sales"];
    $scope.data = [100];
});

在 HTML 中：

<canvas id="doughnut" class="chart chart-doughnut"
    chart-data="data" chart-labels="labels">
</canvas>

这就是我得到的：

ɢʀᴜɴᴛ

首先，你的$scope.data数组应该是......

$scope.data = [
   [100]
];

到设定/饼图/圆环图，组的颜色改变backgroundColor属性的颜色值的阵列（一个或多个），在$scope.datasetOverride

$scope.datasetOverride = [{
   backgroundColor: ['#67d2c4']
}];

并且，为了使线更薄，集cutoutPercentage属性为数字（薄）在$scope.options

$scope.options = {
   cutoutPercentage: 80
}

另外，请确保chart-dataset-override在 HTML 标记中添加指令。

:: 工作示例 ::

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

app.controller("DashboardController", function($scope) {
   $scope.labels = ["Download Sales"];
   $scope.data = [
      [100]
   ];
   $scope.options = {
      cutoutPercentage: 80 //set as you wish
   }
   $scope.datasetOverride = [{
      backgroundColor: ['#67d2c4']
   }];
});

<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="DashboardController">
   <canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options" chart-dataset-override="datasetOverride"></canvas>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。