首页 > 编程语言> > javascript – 如何在角图表条形图中使用纯色条

javascript – 如何在角图表条形图中使用纯色条

2019-10-02 17:34:49 作者：互联网

我正在使用角度图表(基于chart.js)创建一些条形图,并且无法获得我想要的条形图.我希望这些条纹是这样的纯色：

但我无法弄清楚如何摆脱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的信息是什么.

任何帮助,将不胜感激.

解决方法:

您可以使用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"
        ]
      },
    ];

DEMO

标签：javascript,angularjs,chart-js,charts,angular-chart
来源： https://codeday.me/bug/20191002/1843660.html