Wie eine Gruppe von StackedBar mit Winkeln chart.js erstellen [dupliziert]

Question

I Winkel chart.js verwenden, aber ich fand Probleme eine Gruppe von StackedBar, wie dies zu acheive:

Dies ist in unter meinem Code:

$scope.labels = []; 
      $scope.labels = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", 
      "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"]; 
      $scope.type = "StackedBar"; 
      $scope.series = ['Series A', 'Series B']; 
      $scope.options = { 
       scales: { 
        xAxes: [{ 
         stacked: true, 
         ticks : { 
          beginAtZero: true 
         } 
        }], 
        yAxes: [{ 
         stacked: false, 
         ticks : { 
          beginAtZero: true 
         } 
        }] 
       } 
      }; 
      $scope.data = [ 
       [65, 59, 90, 81, 56, 55, 40], 
       [28, 48, 40, 19, 96, 27, 100] 
      ]; 
      $scope.colors = []; 
      $scope.colors = ['#00ADF9']; 

Für den hTML-Code:

<canvas class="chart chart-bar" chart-type="type" chart-data="data" 
          chart-labels="labels" chart-series="series" chart-options="options" 
          chart-colors="colors"> 
        </canvas> 

So bekomme ich dieses Ergebnis mit diesem Code:

Bitte jede Hilfe

Answer 1

ändern gestapelt Wert für x-Achse auf false gesetzt. http://plnkr.co/edit/fboi5UVLyBtS9ozo2QaR?p=preview. ist das, was Sie suchen?

$scope.options = { 
       scales: { 
        xAxes: [{ 
         stacked: false, // change to false 
         ticks : { 
          beginAtZero: true 
         } 
        }], 
        yAxes: [{ 
         stacked: false, 
         ticks : { 
          beginAtZero: true 
         } 
        }] 
       } 
      }; 

Answer 2

ich dieses Problem beheben, indem Sie meinen Code zu ändern:

$scope.labels = ["Janvier", "Février", "Mars", "Avril" , "Mai", "Juin", 
         "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ]; 
         $scope.type = "StackedBar"; 
         $scope.series = ['Vital épargne', 'Prévoyance groupe']; 
         $scope.options = { 
          scales: { 
           xAxes: [{ 
            stacked: true, 
            ticks: { 
             beginAtZero: true 
            } 
           }], 
           yAxes: [{ 
            stacked: true, 
            ticks: { 
             beginAtZero: true 
            } 
           }] 
          } 
         }; 

$scope.data = [ 
          [59, 80, 81, 56, 55, 40, 65], 
    [65, 59, 90, 81, 56, 55, 40], 
    [60, 59, 80, 81, 56, 55, 40] 
         ]; 
         $scope.datasetOverride = [ 
          { 
           label: "Vital épargne: réalisé", 
           backgroundColor: "rgba(99,255,132,0.2)", 
           data: [65, 59, 90, 81, 56, 55, 40], 
           stack: 1 
          }, 

          { 
           label: "Prévoyance groupe: réalisé", 
           backgroundColor: "rgba(99,132,255,0.2)", 
           data: [59, 80, 81, 56, 55, 40, 65], 
           stack: 2 
          }, 
          { 
           label: "Prévoyance groupe: estimé", 
           backgroundColor: "rgba(255,99,132,0.2)", 
           data: [60, 59, 80, 81, 56, 55, 40], 
           stack: 2 
          } 
         ]; 

Hier ist das Ergebnis davon:

mein Plunker solution