Angular实现horizontal stacked bar水平堆叠条形图运行异常求助

修复方案 #

你使用的是angular-chart.js库开发堆叠水平条形图，运行失败是由以下几个可修复的问题导致的：

• HTML中绑定了未定义的datasetOverride变量，导致图表初始化报错
• 混用了chart-bar类与水平条形图类型，不同版本的angular-chart.js中静态类会覆盖动态绑定的chart-type属性
• 部分低版本angular-chart.js不支持通过chart-type动态指定horizontalBar类型，需要使用对应指令

修复后的代码

HTML代码

<!-- 方式1：用动态type实现，不需要指定bar类避免冲突 -->
<canvas class="chart" 
        chart-type="type" 
        chart-data="data" 
        chart-labels="labels" 
        chart-series="series" 
        chart-options="options" 
        chart-colors="colors" 
        chart-legend="true">
</canvas>

<!-- 方式2：直接用horizontalBar指令，不需要指定chart-type属性 -->
<!-- <canvas class="chart chart-horizontal-bar" 
        chart-data="data" 
        chart-labels="labels" 
        chart-series="series" 
        chart-options="options" 
        chart-colors="colors" 
        chart-legend="true">
</canvas> -->

JS代码

你的JS逻辑本身没有问题，只需要确认依赖版本匹配即可：使用angular-chart.js 1.x版本配套Chart.js 2.x版本，修改后即可正常渲染出水平堆叠条形图。

$scope.statuses = ["Permanent", "Contract", "Probabition", "Out Source", "Grand Total"];
$scope.series = ['SMA/SMK', 'D1,D2,D3', 'S1', 'S2', 'S3', 'Grand Total'];
$scope.dummy = [1, 2, 3, 4]

$scope.educations = [];

for (var i=0; i < $scope.series.length-1; i++){
  $scope.educations.push([$scope.series[i], $scope.dummy[0]+i, $scope.dummy[1]+i, $scope.dummy[2]+i, $scope.dummy[3]+i, $scope.dummy.reduce((acc, cur) => acc + cur, 0)+i])
}

$scope.labels = $scope.statuses.slice(0, 4);
$scope.type = "horizontalBar";
$scope.options = {
  legend: {
    display: true,
    position: 'right'
  },
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }],
    yAxes: [{
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

$scope.data = [];
$scope.colors = ['#4D5360', '#949FB1', '#97BBCD', '#97BBCD', '#97BBCD'];

for(var i=0; i<$scope.series.length-1; i++){
  $scope.data.push([$scope.dummy[0]+i, $scope.dummy[1]+i, $scope.dummy[2]+i, $scope.dummy[3]+i])
}

内容的提问来源于stack exchange，提问作者zainal abidin