如何使用角chart.js之打造一批StackedBar的[複製]

我使用角chart.js之，但我發現問題acheive一組StackedBar的，就像這樣：如何使用角chart.js之打造一批StackedBar的[複製]

這是在下面我的代碼：

$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'];

對於html代碼：

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

所以我得到這樣的結果與代碼：

請任何幫助

來源

2017-05-29 Ghizlane Lotfi

通類型爲'圖吧'。檢查此http://jtblin.github.io/angular-chart.js/#top –

你的意思是在HTML代碼中的圖表欄？如果已經這樣做 –

你可以發佈一個這樣的plunker嗎？我會糾正這一點。 –

更改x軸的堆棧值爲false。 http://plnkr.co/edit/fboi5UVLyBtS9ozo2QaR?p=preview。這是你在找什麼？

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

來源

2017-05-29 11:35:15

是的，謝謝，但也爲每個酒吧，我想有一個堆積酒吧。一組堆疊的酒吧 –

如果我得到的是正確的。你正在尋找一個混合圖。 @GhizlaneLotfi –

讓我說，我該怎麼做 –

我解決這個問題，通過改變我的代碼：

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

這裏是它的結果：

檢查我plunker solution

來源

2017-05-30 14:45:07

如何使用角chart.js之打造一批StackedBar的[複製]

回答

相關問題