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

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

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

HTML格式

<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>

<canvas id="mychart"></canvas>

Javascript语言

let data = [12, 14, 13, 18, 21, 22, 25];
let labels = ["2017-01-20", "2017-01-22", "2017-01-24", "2017-01-26", "2017-01-28", "2017-01-30", "2017-02-01"];

let options = {
  scales: {
    x: {
      type: 'time', //this line make the chart disappear
      time: {
        unit: 'day'
      }
    },
    y0: {
      ticks: {
        min: 0
      }
    },
  },
};

let chartData = {
    labels: labels,
    datasets: [{
      data: data,
      label: 'Amount of Stuff',
      backgroundColor: '#035e7b',
    }]
};

let ctx = document.getElementById('mychart').getContext('2d');

new Chart(ctx, {
  data: chartData,
  type: 'line',
  options: options,
});
n1bvdmb6

n1bvdmb61#

docs

日期适配器

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

<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>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<canvas id="mychart"></canvas>

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

相关问题