使用date-fn适配器在CHARTJS中设置动态最小和最大日期

js5cn81o  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(130)

我目前正在开发一个分析 Jmeter 板,我选择了Chartjs来可视化图形,一切都很正常,除了我似乎不知道如何动态设置chartjs时间对象的MIN和MAX日期。它是这样硬编码的:

const config = {
    type: "bar",
    data: {
      datasets: [
        {
          label: "base",
          data: monthly_data,
          backgroundColor: ["rgba(255, 99, 132, 0.2)"],
          borderColor: ["rgba(255, 99, 132, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "base",
          },
        },
        {
          label: "Case",
          data: monthly_data,
          backgroundColor: ["rgba(54, 162, 235, 0.2)"],
          borderColor: ["rgba(54, 162, 235, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "case",
          },
        },
        {
          label: "Standard",
          data: monthly_data,
          backgroundColor: ["rgba(255, 206, 86, 0.2)"],
          borderColor: ["rgba(255, 206, 86, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "standard",
          },
        },
      ],
    },
    options: {
      scales: {
        x: {
          type: "time",
          min: "2021-03-01",
          max: "2022-03-31",
          time: {
            unit: "month",
          },
        },
      },
    },
  };

我是否可以调用一个函数来动态设置这一点,例如在月度视图中,图表应该显示12个月前的情况?

brvekthn

brvekthn1#

你可以传递一个函数给min和max,它可以为你计算最小值和最大值,如下所示:

options: {
  scales: {
    x: {
      type: 'time',
      min: () => {
        return calculateMin()
      }
    }
  }
}

相关问题