Angular Chart.js：选中图例时如何保持Y轴刻度值不变

嗨，我懂你的需求啦——你用Angular Chart做堆叠柱状图时，发现未选中图例（只显示单个系列）和选中全部图例（显示两个堆叠系列）的Y轴刻度不一样，想让两种状态下的Y轴刻度保持一致对吧？

问题根源 #

Chart.js默认会根据当前显示的数据集自动计算Y轴的最大/最小值，当你选中全部图例时，两个系列的数据堆叠总和变大，Y轴的刻度范围就会自动扩大，和只显示单个系列时的刻度范围不一样了。

解决方案 #

我们可以通过固定Y轴的刻度范围来解决这个问题，有两种实用方式：

方式1：手动设置固定刻度范围

如果你已经清楚数据的大致范围，可以直接在Y轴配置里指定min和max值：

修改JavaScript代码中$scope.options里的yAxes配置：

yAxes: [{
  stacked: true,
  categorySpacing: 0,
  display: true,
  maxBarThickness: 0,
  position: 'left',
  ticks: {
    beginAtZero: true,
    min: 0, // 固定最小值为0
    max: 200 // 根据你的数据情况设置合适的最大值
  },
  scaleLabel: {
    display: true,
    labelString: "# of Corrective Action"
  }
}]

方式2：动态计算最大刻度值

如果数据会动态变化，我们可以先计算所有可能的堆叠数据总和的最大值，再把这个值设为Y轴的max，这样更灵活：

在控制器里添加计算逻辑：

// 计算单个系列的最大值和堆叠后的最大值
const seriesMax = Math.max(...$scope.data[0], ...$scope.data[1]);
const stackedMax = Math.max(...$scope.data[0].map((val, idx) => val + $scope.data[1][idx]));
const yMax = Math.max(seriesMax, stackedMax);

然后把计算好的最大值赋值给Y轴配置：

$scope.options = {
  // ... 其他原有配置
  scales: {
    // ... xAxes原有配置
    yAxes: [{
      // ... 其他原有配置
      ticks: {
        beginAtZero: true,
        min: 0,
        max: yMax * 1.1 // 乘以1.1是为了给顶部留一点余量，视觉上更美观
      }
    }]
  }
};

修改后的完整JavaScript代码示例 #

var app = angular.module('plunker', ['chart.js']);
app.controller("MainCtrl", function($scope) {
  $scope.labels = ["Jan", "Feb", "Mars", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec" ];
  $scope.type = "bar";
  $scope.series = ['Series A', 'Series B'];
  
  // 计算Y轴最大刻度值
  $scope.data = [
    [65, 59, 90, 81, 56, 55, 40,10,60,90,84,63],
    [28, 48, 40, 19, 96, 27, 100,50,40,90,31,70]
  ];
  const seriesMax = Math.max(...$scope.data[0], ...$scope.data[1]);
  const stackedMax = Math.max(...$scope.data[0].map((val, idx) => val + $scope.data[1][idx]));
  const yMax = Math.max(seriesMax, stackedMax);

  $scope.options = {
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked"
    },
    tooltips: { intersect: true },
    scales: {
      xAxes: [{
        barThickness: 15,
        categoryPercentage: 0.1,
        stacked: true,
        ticks: { autoSkip: false },
        scaleLabel: { display: true, labelString: "Process Area" },
        gridLines: { display: false }
      }],
      yAxes: [{
        stacked: true,
        categorySpacing: 0,
        display: true,
        maxBarThickness: 0,
        position: 'left',
        ticks: {
          beginAtZero: true,
          min: 0,
          max: yMax * 1.1
        },
        scaleLabel: { display: true, labelString: "# of Corrective Action" }
      }]
    },
    elements: { line: { fill: false } },
    legend: {
      display: true,
      position: 'bottom',
      labels: { boxWidth: 15 }
    }
  };
  
  $scope.colors = ['#00ADF9'];
});

这样设置之后，不管用户是否选中全部图例，Y轴的刻度范围都会保持固定，和未选中图例时的显示效果一致啦～

内容的提问来源于stack exchange，提问作者Joydeep Roy