我目前正在开发一个分析仪表板,我 Select 了Chartjs来可视化图形,除了我似乎不知道如何动态设置Chartjs time对象的最小和最大日期之外,一切都很好.其硬编码如下:

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个月前的数据?

推荐答案

只需将一个函数传递给"最小值"和"最大值",即可为您计算"最小值"和"最大值",如下所示:

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

Javascript相关问答推荐

如何在RTK上设置轮询,每24小时

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

为什么这个JS模块在TypeScript中使用默认属性导入?""

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么?

配置WebAssembly/Emscripten本地生成问题

屏幕右侧屏障上的产卵点""

使用Java脚本根据按下的按钮更改S文本

无法读取未定义错误的属性路径名''

Javascript json定制

使用Promise.All并发解决时,每个promise 的线性时间增加?

Chart.js-显示值应该在其中的引用区域

Reaction Native中的范围滑块

JQuery Click事件不适用于动态创建的按钮

闭包是将值复制到内存的另一个位置吗?

如何为仅有数据可用的点显示X轴标签?

使用CEPRESS截取时,cy.Wait()在等待5000ms的第一个路由请求时超时

无法使用npm install安装react-dom、react和next

将匿名函数附加到链接的onClick属性

在ReactJS上挂载组件时获得多个身份验证请求

响应,Use Callback更新状态变量,该变量也存在于其依赖数组中,它如何防止无限重新呈现?