如何在Angular-Chart柱状图中实现纯色条形图

Question

如何在Angular-Chart柱状图中实现纯色条形图

javascriptangularjschartschart.jsangular-chart

5

我正在使用基于chart.js的angular-chart创建柱状图，但是我在获取所需的柱状样式时遇到了问题。我希望柱子的颜色是纯色的，就像这样：

但是我无法弄清楚如何去掉chart.js默认添加的alpha值：

我的html代码如下：

  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

而且 javascript：

angular.module('myApp', ['chart.js'])

    .controller('myController', [function() {
        var ctrl = this;

        ctrl.socialChart = {
            options: {
                legend: {
                    display: true
                }
            },
            labels: ['2012'],
            series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
            // colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
            colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
            data: [[1178], [652], [1004], [838]]
        }
    }]);

这里有一个示例 Plunker：Plunker

我发现了很多关于使用 rgba 表示法的信息（但由于某种原因，它给我错误的颜色），以及 fillColor（我根本无法让它工作）。很难分辨哪些信息适用于 chart.js 的版本 1 或 2。

任何帮助将不胜感激。

- Jason

4个回答

1

我正在使用带有Angular封装器的chart.js版本2，进行以下编辑可以帮助我。

更改-颜色以rgba(R,G,B,alpha)的形式作为参数传入
alpha = 1：纯色， alpha = 0：透明色

在HTML中： <canvas id="bar" class="chart chart-bar" chart-data="barData" chart-labels="filter" chart-series="barLabels" chart-options="baroptions" chart-colors="setColors" > </canvas>

在我的控制器类中，我定义了setColors如下：

在 controller.js 文件中： $scope.setColors = [{backgroundColor:'rgba(249,166,92,1)',pointBackgroundColor:'rgba(249,166,92,1),pointHoverBackgroundColor:'rgba(249,166,92,1)',borderColor:'rgba(249,166,92,1)',pointBorderColor:'rgba(249,166,92,1)',pointHoverBorderColor:'rgba(249,166,92,1)'}, {backgroundColor:'rgba(90,155,211,1)',pointBackgroundColor:'rgba(90,155,211,1)',pointHoverBackgroundColor:'rgba(90,155,211,1)',borderColor:'rgba(90,155,211,1)',pointBorderColor:'rgba(90,155,211,1)',pointHoverBorderColor:'rgba(90,155,211,1)'}, {backgroundColor:'rgba(120,194,107,1)',pointBackgroundColor:'rgba(120,194,107,1)',pointHoverBackgroundColor:'rgba(120,194,107,1)',borderColor:'rgba(120,194,107,1)',pointBorderColor:'rgba(120,194,107,1)',pointHoverBorderColor:'rgba(120,194,107,1)'}]

- barak_332

0

这里是我编写的代码，用于制作具有自定义设置的条形图。在canvas HTML标签中使用此属性chart-dataset-override="datasetOverride"：

<canvas id="bar" class="chart chart-bar"
        chart-data="expenseData" chart-labels="labels" chart-series="series" 
        chart-options="chartOptions" chart-dataset override="datasetOverride">
</canvas>


var setGraphDate = function () {
    var xData = [];
    var yData = [];
    $scope.Data.ExpenseRecords.forEach(function (g) {
        yData.push(g.PercentOfCompletion);
        xData.push(g.TspShortName);
    });
    $scope.datasetOverride =
    {
        backgroundColor: "#4E4EFF",
        borderColor: "#2E2E99"
    };
    $scope.labels = xData;
    $scope.expenseData = yData;
    $scope.series = ['Expense Graph'];
   // more options
    $scope.chartOptions = {

        legend: {
            display: false
        },

        },
        title: {
            display: true,
            text: 'TSP Burn Rate'
        },
        events: false,
        tooltips: {
            enabled: false
        },
        hover: {
            animationDuration: 0
        }
};

- Md. Masudur Rahman

0

只需使用RGBA，其中A表示不透明度，并将其设置为1，以定义实色。例如：backgroundColor: [ 'rgba(255, 99, 132, 1)']

- Shivam Sagar

你不能只是要求我更正代码格式，而不是对正确答案进行投票吗？ - Shivam Sagar

@Mohammad Kanan，我是Stack Overflow的新手，这是我的第一条评论...你应该先告诉我，但你决定将其投票否决...现在你的行为会影响我的声誉。 - Shivam Sagar

嗯！为什么你认为是我给你的回答点了踩？我没有...，你好像误解了SO中的“编辑”是什么意思...人们会被吸引去编辑答案，特别是正确的答案，以改进它们（这有助于你得到赞），而不符合SO标准的“低质量”答案通常会被删除...“点踩”与答案的技术方面有关（可能是错误的）...而“编辑”只用于格式问题...从技术上讲，我甚至不知道你的答案是否错误？你可以发表评论并询问为什么你的答案被点踩？在技术上有什么问题？ - Mohammad Kanan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sajeetharan · Accepted Answer

您可以使用 chart-dataset-override="datasetOverride"。

HTML。

 <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" 
    chart-data="data" 
    chart-labels="labels" 
    chart-series="series" 
    chart-dataset-override="datasetOverride"></canvas>
  </div>

控制器

  ctrl.datasetOverride = [{
        fill: true,
        backgroundColor: [
          "#ED402A",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#F0AB05",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#A0B421",
          "#36A2EB",
          "#FFCE56"
        ]
      }, {
        fill: true,
        backgroundColor: [
          "#00A39F",
          "#36A2EB",
          "#FFCE56"
        ]
      },
    ];

演示