Chart.js自动调整失败

Question

我遇到了一个问题，当从图例中取消选择数据集时，条形图不会更新y轴刻度。我正在使用yAxes下的'suggestedMax'选项在最高栏的顶部添加一些填充。如果不这样做，比例将在最高的栏（3500）处达到最高点。我读了documentation并且它声明了suggestMax应该仍然自动适应数据，但这不是我正在经历的。

文档声明如下：

suggestedMax和suggestedMin设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动调整行为很有用。

这是图表：

var ctx1 = document.getElementById("myBarChart1")
var myBarChart = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: ['2/17','2/18','2/19','2/20','2/21','2/22'],
    datasets: [
    {
      label: "Bar 1",
      backgroundColor: "rgba(255,0,0,0.6)",
      borderColor: "rgba(255,0,0,1)",
      data: [2500,1000,1500,3500,2000,500]
    },
    {
      label: "Bar 2",
      backgroundColor: "rgba(2,117,216,0.6)",
      borderColor: "rgba(2,117,216,1)",
      data: [50,0,100,1250,500,0]
    },
    {
      label: "Bar 3",
      backgroundColor: "rgba(255,255,51,0.6)",
      borderColor: "rgba(255,255,51,0.6)",
      data: [0,0,150,250,550,200]
    },
    {
      label: "Bar 4",
      backgroundColor: "rgba(0,255,102,0.6)",
      borderColor: "rgba(0,255,102,1)",
      data: [2450,1000,1250,2000,100,0]
    },
    ],
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        time: {
          unit: 'day'
        },
        gridLines: {
          display: false,
          color: "white"
        },
        ticks: {
          maxTicksLimit: 6,
          fontColor: "white"
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 15,
          fontColor: "white",
          padding: 10,
          suggestedMax: 4000
        },
        gridLines: {
          display: true,
          color: "white"
        }
      }],
    },
    legend: {
      display: true,
      labels: {
        fontColor: "white",
      }
    }
  }
})

HTML：

<!-- Uses Bootstrap 4 -->
<div class="card mb-3">
  <div class="card-header">Test Status Chart</div>
  <div class="card-body" style="background: #212529">
    <canvas id="myBarChart1" width="170%" height="40%"></canvas>
  </div>
</div>

要重新创建我正在点击图例中的“条1”，比例应保持最大值4000，然后缩小到下一个最高数字（2450）。

当我删除suggestMax选项是完美的工作，减去规模在3500最高的事实。我也使用max选项时遇到相同的问题。

任何有关这方面的帮助都会很棒！

Answer 1

我有一个有效的解决方案。

定义一个函数getMax（），它接收图表并返回所有可见数据集的最大值。

var getMax = function(chart) {
    datasets = chart.data.datasets;
    max = 0;
    for(var i=0; i<datasets.length; i++) {
        dataset=datasets[i]
        if(chart.data.datasets[i].hidden) {
            continue;
        }
        dataset.data.forEach(function(d) {
            if(typeof(d)=="number" && d>max) {
                max = d
            }
        })
    }
    return max;
}

然后到options.legend，添加一个onClick函数来调用它并将y轴suggestMax重置为该最大值加100（你可以根据需要调整它）：

  options: {
    <...>
    legend: {
      display: true,
      labels: {
        fontColor: "white",
      },
      onClick: function(e, legendItem) {
        di=legendItem.datasetIndex
        myBarChart.data.datasets[di].hidden = !myBarChart.data.datasets[di].hidden;
        myBarChart.options.scales.yAxes[0].ticks.suggestedMax=getMax(myBarChart)+100;
        myBarChart.update()
      }
    }
  }