如何使用 svelte 在折线图(图表 JS)中获取最后 7 天?

How to get last 7 days in Line chart(chart JS) with svelte?

提问人:Jay0813 提问时间:9/26/2022 最后编辑:Jay0813 更新时间:9/26/2022 访问量:198

问:

我想使用带有苗条 JS 的图表 JS 制作折线图。 在此图表中,我想在 x 轴上显示过去 7 天,在 y 轴上显示计数数字。

我安装了 5 个模块来显示天数标签。

但是我在使用 x 轴“时间”时遇到了这个错误

未捕获(在 promise 中)错误:未实现此方法:检查是否提供了完整的日期适配器。

安装 chartjs-adapter-moment 和 moment 后,未修复。 我应该怎么做才能修复此错误?

谢谢你的每一个回答

"chart.js": "^3.9.1",
"svelte-chartjs": "^3.0.1"
"moment": "^2.29.4",
"chartjs-plugin-datalabels": "^2.1.0",
"chartjs-adapter-moment": "^1.0.0",

<script>
  import { onMount } from "svelte"
  import Chart from "chart.js/auto/auto.js"
  import moment from "moment"
  import "chartjs-adapter-moment"
 



  export let type = "line"

  let chart, options, config


  let start = new Date(),
        end = new Date()

  start.setDate(start.getDate() - 7)
  start.setHours(0, 0, 0, 0)


  options = {
    scales: {
      x: {
        type: 'time'
        time: {
          min: start,
          max: end,
          unit: "day"
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }

  config = {
    type: type,
    options: options
  }

  onMount(() => {
      const ctx = chart.getContext("2d")
      let myChart = new Chart(ctx, config)
  })

</script>


<canvas bind:this="{chart}"></canvas>
JavaScript chart.js Svelte

评论

0赞 user2057925 9/26/2022
你能检查一下导入日期包的顺序吗?顺序为:CHART.JS、力矩和CHART.JS力矩适配器
0赞 Jay0813 9/26/2022
@user2057925我改变了顺序..但它仍然没有工作
0赞 user2057925 9/26/2022
好的,更深入地看,最小值和最大值是比例的选项,而不是时间节点的选项。将这些选项移至上层
0赞 user2057925 9/26/2022
移动最小值/最大值可以工作吗?
0赞 Jay0813 9/26/2022
@user2057925他们俩都不工作......我认为问题出在类型:“时间”。当我添加此ATTR错误时

答: 暂无答案