ChartJS Chart js -当x轴具有“时间”类型时,图表不显示

7tofc5zh  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(247)

我在Char.js版本3.9.1上工作,我有一个显示数据(y值)沿着时间(x值)的图表。一切看起来都很好。
但是,当我将“type”属性添加到x轴以使x刻度具有日单位时,图表不显示任何内容。我尝试在jsfiddle中运行代码,控制台显示错误“未捕获的错误:未实现此方法:检查是否提供了完整的日期适配器。”我试着在互联网上搜索,仍然没有找到任何解决方案。
这是我的code(我必须在type: 'line'上添加注解才能使图表显示)。

HTML格式

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2. <canvas id="mychart"></canvas>

Javascript语言

  1. let data = [12, 14, 13, 18, 21, 22, 25];
  2. let labels = ["2017-01-20", "2017-01-22", "2017-01-24", "2017-01-26", "2017-01-28", "2017-01-30", "2017-02-01"];
  3. let options = {
  4. scales: {
  5. x: {
  6. type: 'time', //this line make the chart disappear
  7. time: {
  8. unit: 'day'
  9. }
  10. },
  11. y0: {
  12. ticks: {
  13. min: 0
  14. }
  15. },
  16. },
  17. };
  18. let chartData = {
  19. labels: labels,
  20. datasets: [{
  21. data: data,
  22. label: 'Amount of Stuff',
  23. backgroundColor: '#035e7b',
  24. }]
  25. };
  26. let ctx = document.getElementById('mychart').getContext('2d');
  27. new Chart(ctx, {
  28. data: chartData,
  29. type: 'line',
  30. options: options,
  31. });
n1bvdmb6

n1bvdmb61#

docs

日期适配器

时间刻度要求同时存在日期库和相应的适配器。请从可用的适配器中选择。
因此,您可以像这样更改HTML:

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  2. <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
  4. <canvas id="mychart"></canvas>

然后您就可以将type: "time"用于x轴。

相关问题