Question

我遇到一个问题，当从图例中取消选择数据集时，条形图不会更新y轴比例。我正在使用yAxes下的'suggestedMax'选项，在最高栏的顶部添加一些填充。如果我不这样做，比例尺将达到最高的柱顶（3500）。我阅读了documentation，其中指出，建议Max仍应自动拟合数据，但这不是我所遇到的。

文档规定以下内容：

建议的最大值和建议的最小值设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动装配行为很有用。

以下是图表：

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）。

当我删除notifyMax选项时，它的工作原理非常完美，减去了比例尺最高达到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轴的建议最大重置为该最大值加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()
      }
    }
  }

Chart.js自动调整失败

1 个答案: