Chart.js 不考虑 yAxis 的最小值和最大值

Question

SO，我有一个条形图（chart.js v4.4.2），它显示了 4 个不同的数据集。如果没有数据，图表将遵循 y 轴的所有最小值和最大值。当图表更新时，它会考虑最小值，我认为是因为条形图的类型，但最大值被完全忽略。我做错了什么？

const chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "Temperatur",
        data: [20, 25, 22, 28, 500, 26, 24],
        yAxisID: "temp",
        borderColor: "lightblue",
        backgroundColor: "lightblue"
      },
      {
        label: "Auslastung",
        data: [0.8, 0.7, 0.6, 0.75, 2.3, 0.85, 0.8],
        yAxisID: "util",
        borderColor: "lightgreen",
        backgroundColor: "lightgreen"
      },
      {
        label: "Netzwerk",
        data: [800, 900, 1000, 850, 1600, 900, 950],
        yAxisID: "net",
        borderColor: "pink",
        backgroundColor: "pink"
      },
      {
        label: "Nutzerzahlen",
        data: [100, 120, 110, 130, 300, 125, 130],
        yAxisID: "user",
        borderColor: "orange",
        backgroundColor: "orange"
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    animation: {duration: 0},
    color: "black",
    scales:{
      temp: { position: "left" , backgroundColor: "lightblue", min: 0, max: 120},
      util: {position: "left" , backgroundColor: "lightgreen", min: 0, max: 1},
      net: {position: "right", backgroundColor: "pink", min: 0, max: 1000},
      user: {position: "right", backgroundColor: "orange", min:0}
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="ctx"></canvas>

尝试添加类似力的步长以尊重最大值。但没有成功。看起来更新后图表忽略了除了颜色等之外的所有缩放比例。

Answer 1

在 Chart.js v4.4.2 中，定义比例的正确方法与您尝试的方法略有不同。

const chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "Temperatur",
        data: [20, 25, 22, 28, 500, 26, 24],
        yAxis: "temp",
        borderColor: "lightblue",
        backgroundColor: "lightblue"
      },
      {
        label: "Auslastung",
        data: [0.8, 0.7, 0.6, 0.75, 2.3, 0.85, 0.8],
        yAxis: "util",
        borderColor: "lightgreen",
        backgroundColor: "lightgreen"
      },
      {
        label: "Netzwerk",
        data: [800, 900, 1000, 850, 1600, 900, 950],
        yAxis: "net",
        borderColor: "pink",
        backgroundColor: "pink"
      },
      {
        label: "Nutzerzahlen",
        data: [100, 120, 110, 130, 300, 125, 130],
        yAxis: "user",
        borderColor: "orange",
        backgroundColor: "orange"
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    animation: { duration: 0 },
    scales: {
      y: {
        temp: { position: "left", min: 0, max: 120 },
        util: { position: "left", min: 0, max: 1 },
        net: { position: "right", min: 0, max: 1000 },
        user: { position: "right", min: 0 }
      }
    }
  }
});