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

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

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

  1. const config = {
  2. type: "bar",
  3. data: {
  4. datasets: [
  5. {
  6. label: "base",
  7. data: monthly_data,
  8. backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  9. borderColor: ["rgba(255, 99, 132, 1)"],
  10. borderWidth: 1,
  11. minBarLength: 7,
  12. parsing: {
  13. xAxisKey: "x",
  14. yAxisKey: "base",
  15. },
  16. },
  17. {
  18. label: "Case",
  19. data: monthly_data,
  20. backgroundColor: ["rgba(54, 162, 235, 0.2)"],
  21. borderColor: ["rgba(54, 162, 235, 1)"],
  22. borderWidth: 1,
  23. minBarLength: 7,
  24. parsing: {
  25. xAxisKey: "x",
  26. yAxisKey: "case",
  27. },
  28. },
  29. {
  30. label: "Standard",
  31. data: monthly_data,
  32. backgroundColor: ["rgba(255, 206, 86, 0.2)"],
  33. borderColor: ["rgba(255, 206, 86, 1)"],
  34. borderWidth: 1,
  35. minBarLength: 7,
  36. parsing: {
  37. xAxisKey: "x",
  38. yAxisKey: "standard",
  39. },
  40. },
  41. ],
  42. },
  43. options: {
  44. scales: {
  45. x: {
  46. type: "time",
  47. min: "2021-03-01",
  48. max: "2022-03-31",
  49. time: {
  50. unit: "month",
  51. },
  52. },
  53. },
  54. },
  55. };

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

brvekthn

brvekthn1#

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

  1. options: {
  2. scales: {
  3. x: {
  4. type: 'time',
  5. min: () => {
  6. return calculateMin()
  7. }
  8. }
  9. }
  10. }

相关问题