[英]How do you set pie chart colors in angular-chart.js
我正在使用angular-charts.js中的餅圖。 我已經做到了這一點,我可以設置數據和標簽。 只要在“餅”項列表中添加或刪除某些內容,就會執行觀察器功能。
識別標簽和數據,但不識別顏色。 我嘗試了一些不同的拼寫。
app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
$scope.labels = pieItems.labelsItems();
$scope.data = pieItems.data();
function watcherFunction(newData) {
$scope.labels = pieItems.labelsItems(); //just an array of strings.
$scope.data = pieItems.data(); //just an array of number values
$scope.colours = ["rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)"] //not working
$scope.colors = ["rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)"] //also not working
}
$scope.$watch(pieItems.list, watcherFunction, true);
$scope.$watch(pieItems.getTitle, watcherFunction, true);
});
它似乎為切片生成隨機顏色。 我想覆蓋它。 肯定有可能這樣做嗎?
你的JS:
$scope.colours = ["rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)",
"rgba(224, 108, 112, 1)"]
您的指令標記:
<canvas id="pie" class="chart chart-pie" chart-colours="colours"></canvas>
文檔說您可以通過設置數組來覆蓋默認顏色:
Chart.defaults.global.colours
對於版本1.x對象實例或簡單RGBA值有兩種方式作為字符串:
colors = ["rgba(159,204,0,0.5)","rgba(250,109,33,0.7)","rgba(154,154,154,0.5)"];
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="doughnut"
class="chart chart-doughnut"
chart-data="$ctrl.piChartData"
chart-labels="$ctrl.labels"
chart-options="$ctrl.options"
chart-colors="$ctrl.colors"
>
</canvas>
如他們的文檔所述,這對我有用。
文檔鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.