Comment avoir des barres de couleur solide dans un graphique à barres angular-chart ?

Question

Comment avoir des barres de couleur solide dans un graphique à barres angular-chart ?

Demandé el 3 de Novembre, 2016: Quand la question a-t-elle été
1112 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'utilise angular-chart (basé sur chart.js) pour créer des diagrammes à barres et j'ai du mal à obtenir le style de barres que je veux. Je veux que les barres soient de couleur unie comme ceci :

Mais je n'arrive pas à trouver comment me débarrasser de l'alpha que chart.js ajoute par défaut :

Mon html ressemble à ceci :

  <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>

Et le 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]]
        }
    }]);

Voici un Plunker qui en fait la démonstration : Plunker

J'ai trouvé beaucoup d'informations sur l'utilisation de la notation rgba (qui, pour une raison quelconque, me donne les mauvaises couleurs) et fillColor (qui ne fonctionne pas du tout). Il est difficile de dire quelles informations concernent la version 1 ou 2 de chart.js.

Toute aide serait appréciée.

Demandé el 3 de Novembre, 2016 par Jason

Answer 1

4 Réponses

Answer 2

4voto

Sajeetharan Points 108195

Vous pouvez utiliser 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>

Contrôleur

  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

Répondu el 3 de Novembre, 2016 par Sajeetharan (108195 Points )

Answer 3

0voto

barak_332 Points 31

J'utilise chart.js version 2 avec angular wrapper. Les modifications suivantes m'ont aidé.

Changements - la couleur prend un argument sous la forme de rgba(R,G,B,alpha)
alpha = 1 : couleur solide, alpha = 0 : Couleur transparente

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

Dans ma classe de contrôleur, j'ai défini setColors comme suit :

Dans 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)'}]

Répondu el 17 de Janvier, 2017 par barak_332 (31 Points )

Answer 4

0voto

masudshrabon Points 11

Voici les codes que j'ai fait pour faire un graphique à barres avec des paramètres personnalisés. Utilisez cet attribut chart-dataset-override="datasetOverride" dans la balise html du canevas :

<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
        }
};

Répondu el 25 de Janvier, 2018 par masudshrabon (11 Points )

Answer 5

0voto

Shivam Sagar Points 11

Il suffit d'utiliser RGBA, où A est l'opacité et la valeur 1 qui définit la couleur solide. Ex : backgroundColor: [ 'rgba(255, 99, 132, 1)']

Répondu el 4 de Août, 2018 par Shivam Sagar (11 Points )

Comment avoir des barres de couleur solide dans un graphique à barres angular-chart ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment avoir des barres de couleur solide dans un graphique à barres angular-chart ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: