logo标签列表

如何在Angular Chart.js中为每个条形图设置单一颜色

angularjschart.jsangular-chartist.js
3
这是我的HTML代码：
<canvas id="bar" class="chart chart-bar"
            chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" colours= "colours">

    </canvas>

以下是js代码：

var setGraphDate = function () {
        var xData = [];
        var yData = [];
        $scope.Data.ExpenseRecords.forEach(function (g) {
            yData.push(g.PercentOfCompletion);
            xData.push(g.TspShortName);
        });
        $scope.colours = "rgba(224, 108, 112, 1)";
        $scope.labels = xData;
        $scope.expenseData = yData;
        $scope.series = ['Expense Graph'];
        $scope.chartOptions = {

            legend: {
                display: false
            },

            },
            title: {
                display: true,
                text: 'TSP Burn Rate'
            },

            // Option to show VALUES on chart
            events: false,
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            }
    };

条形图

每个条形的颜色都不同，且在每次重新载入时都会发生变化。

我想让所有条形的颜色都是蓝色。

2个回答
4

使用

chart-dataset-override="colors"

演示

angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
  $scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  
  $scope.data = [
    [1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
  ];
  $scope.colors = [{ 
    fillColor: 'rgba(59, 89, 152,0.2)',
    strokeColor: 'rgba(59, 89, 152,1)',
    pointColor: 'rgba(59, 89, 152,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
  }];
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Multi Slot Transclude</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
  <canvas
        class="chart chart-bar"
        chart-data="data"
        chart-labels="labels"
        chart-dataset-override="colors">
      </canvas>
</body>
</html>

1
我已经以以下方式解决了这个问题：
 $scope.datasetOverride =
        {
            backgroundColor: "#4E4EFF",
            borderColor: "#2E2E99"
        };


<canvas id="bar" class="chart chart-bar"
            chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" chart-dataset-override="datasetOverride">
</canvas>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接