动态更改图表 ChartJs 时缩放 Y 轴

时间:2020-12-28 21:46:51

标签: javascript html graph chart.js

当我更改 x 轴时,我希望图表的 y 轴按比例缩放。我正在根据用户输入更改图表的时间范围。我的图表有以下代码:

var canvas_link = document.getElementById("chart1").getContext("2d");

var myChart = new Chart(canvas_link, {
  type: "bar",
  data: {
    datasets: [{
      data: data,
      label: "Data",
      backgroundColor: "rgba(255, 99, 132, 1)",
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: "time",
        display: true,
        scaleLabel: {
          display: false,
          labelString: "Date"
        },
        time: {
          unit: "month"
        },
        ticks: {
          min: new Date("2020-01-01"),
          max: new Date("2020-12-31"),
          major: {
            fontColor: "#FF2D00"
          }
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 3000
        }
      }]
    },
    responsive: true,
    legend: {
      onClick: (e) => e.stopPropagation()
    }
  }
});

这个图表可以通过调整图表的最小和最大日期来动态变化。此功能完美运行,但我希望 y 轴也能与图表一起缩放。例如Jan - Dec

当我更改图表以使其仅显示 4 月至 7 月的数据时:enter image description here

y 轴范围对于数据来说太大。我希望它自动动态调整轴。非常感谢您提前提供帮助!

0 个答案:

没有答案