javascript - 在chart.js中使用带有月份和年份的自定义x轴绘制条形图时出现问题
问题描述
我们正在尝试使用 chart.js 绘制条形图,并希望在 x 轴上显示月份和年份,但无法这样做。
我们要绘制条形图,如下所示:
https://drive.google.com/file/d/1ezvUdDyp3uNLP3pdumXKHcXGNeBVQw63/view
代码片段:
var timeFormat = 'DD/MM/YYYY';
var data = [
{ date: "1/1/2020 11:35:44 PM", file: "file1", value: 0.0056 },
{ date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
{ date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
{ date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
{ date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
{ date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
{ date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
{ date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
{ date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
{ date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
{ date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
{ date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
{ date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];
var ctx = document.getElementById("CanvasFileData").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: true,
title: {
display: true,
text: "File data"
},
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "File: " + tooltipItem.file + ", Date:" + tooltipItem.date + ", Value:" + tooltipItem.value;
}
}
}
}
});
<canvas id="CanvasFileData" style="width: 100%"></canvas>
解决方案
您的文件栏应均匀分布在 x 轴上的可用空间上。在这种情况下使用时间轴不是一个选项,因为它不会正确匹配条的位置。
详细解释所有内容以获得您正在寻找的内容需要时间。因此,您最好研究下面的可运行代码,看看它是如何完成的。
var data = [
{ date: "1/1/2020 11:35:44 PM", file: "file1", value: 0.0056 },
{ date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
{ date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
{ date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
{ date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
{ date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
{ date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
{ date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
{ date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
{ date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
{ date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
{ date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
{ date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];
const moments = data.map(o => moment(o.date, 'M/D/YYYY'));
const months = moments.map(m => m.format('MMM'));
const monthLabels = months.map((m, i) => i == 0 || months[i - 1] != m ? m : '〃');
const years = moments.map(m => m.format('YYYY'));
const yearLabels = years.map((y, i) => i == 0 || years[i - 1] != y ? y : '');
new Chart('CanvasFileData', {
type: 'bar',
data: {
labels: data.map(o => o.file),
datasets: [{
data: data.map(o => o.value),
backgroundColor: 'rgb(68, 114, 196)',
barPercentage: 0.5
}]
},
options: {
responsive: true,
title: {
display: true,
text: "File data"
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
minRotation: 90,
padding: -32
},
gridLines: {
drawOnChartArea: false,
tickMarkLength: 40
}
},
{
offset: true,
labels: monthLabels,
gridLines: {
display: false
},
},
{
offset: true,
labels: yearLabels,
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
},
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: tooltipItem => "File: " + tooltipItem.xLabel + ", Date:" + data[tooltipItem.index].date + ", Value:" + tooltipItem.value
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="CanvasFileData" height="150"></canvas>
推荐阅读
- sql-server - SQL Server:每月的第一个工作日
- javascript - 如何减少样板
- javascript - 在javascript中将数组转换为对象列表
- php - 更改站点主页的静态 HTML 索引页面 url
- vb.net - vb.net 中的任务栏
- hive - 数据摄取问题 hive:java.lang.OutOfMemoryError:无法创建新的本机线程
- azure-storage - ACS AEM Commons - acs-aem-commons-bundle 找不到类
- android - Android - 除了值之外,如何从 JSON 中获取键名
- java - Android Studio 中的白色 AdView
- json - 从 SQL Server 2016 中的 json 数据返回值