我在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,
});
1条答案
按热度按时间n1bvdmb61#
从docs:
日期适配器
时间刻度要求同时存在日期库和相应的适配器。请从可用的适配器中选择。
因此,您可以像这样更改HTML:
然后您就可以将
type: "time"
用于x
轴。