在 Chart.js 3.0 中，当我绘制 x 轴类型为 time 的图表时，Chart.js 显示许多不必要的标签，如下图所示。
为了创建此图表，我提供了同一天不同时刻的 6 个日期时间数组:00:05、04:11、12:38、15、10、18:41 和 22:02。但正如您所看到的，标签并不反射(reflect)我的数据:它在 1 点到 23 点之间每小时显示一个刻度和一个标签。
我得到了什么:
期望的输出:
因此，当且仅当我提供的数据中确实有一个值时，它才应该在 x 轴上显示标签。
因此，在下面的代码中，它应该只显示数组 datetimes 中包含的值的标签。
我在文档中没有找到任何相关内容。我发现了这个相关的SO问题( Chart.js: only show labels on x-axis for data points )，但不幸的是它不适用于时间类型的轴。
这是一个可重现的示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- import chartjs -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7f747d6e6832766f5c2f322e322d" rel="noreferrer noopener nofollow">[email protected]</a>" crossorigin="anonymous"></script>
<!-- import luxon for working with datetimes -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503c25283f3e10617e62667e60" rel="noreferrer noopener nofollow">[email protected]</a>" crossorigin="anonymous"></script>
<!-- import luxon adpater for integration with chartjs -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb8b3baa9afb1a8f6babfbaabafbea9f6b7aea3b4b59beaf5ebf5eb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chartjs-adapter-luxon.min.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.chart {
width: 600px !important;
height: 600px !important;
}
</style>
<body>
<div class="chart"><canvas id="chartjs"></canvas></div>
<script type="text/javascript">
var ctx = document.getElementById("chartjs").getContext("2d");
// Datetimes to display on chart
let datetimes = [luxon.DateTime.utc(2000, 1, 1, 0, 5), luxon.DateTime.utc(2000, 1, 1, 4, 11), luxon.DateTime.utc(2000, 1, 1, 12, 38), luxon.DateTime.utc(2000, 1, 1, 15, 10), luxon.DateTime.utc(2000, 1, 1, 18, 41), luxon.DateTime.utc(2000, 1, 1, 22, 2)];
// Create an array of ISO strings
let datetimes_isos = [];
datetimes.forEach(function(item, index, array) {
datetimes_isos.push(item.toISO());
});
// Chart's data
let data = [{ x: datetimes_isos[0], y: 0 }, { x: datetimes_isos[1], y: 10 }, { x: datetimes_isos[2], y: 20 }, { x: datetimes_isos[3], y: 40 }, { x: datetimes_isos[4], y: 50 }, { x: datetimes_isos[5], y: 60 }];
const chartData = {
labels: datetimes_isos,
datasets: [{ data: data }]
};
const config = {
type: 'line',
data: chartData,
options: {
scales: {
x: {
type: 'time',
},
},
},
};
var theChart = new Chart(ctx, config);
</script>
</body>
</html>最佳答案
这是解决方案。
您需要将报价来源添加到数据中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- import chartjs -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaea5acbfb9e3a7be8dfee3ffe3fc" rel="noreferrer noopener nofollow">[email protected]</a>" crossorigin="anonymous"></script>
<!-- import luxon for working with datetimes -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0bca5a8bfbe90e1fee2e6fee0" rel="noreferrer noopener nofollow">[email protected]</a>" crossorigin="anonymous"></script>
<!-- import luxon adpater for integration with chartjs -->
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f0fbf2e1e7f9e0bef2f7f2e3e7f6e1beffe6ebfcfdd3a2bda3bda3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chartjs-adapter-luxon.min.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.chart {
width: 600px !important;
height: 600px !important;
}
</style>
<body>
<div class="chart"><canvas id="chartjs"></canvas></div>
<script type="text/javascript">
var ctx = document.getElementById("chartjs").getContext("2d");
// Datetimes to display on chart
let datetimes = [luxon.DateTime.utc(2000, 1, 1, 0, 5), luxon.DateTime.utc(2000, 1, 1, 4, 11), luxon.DateTime.utc(2000, 1, 1, 12, 38), luxon.DateTime.utc(2000, 1, 1, 15, 10), luxon.DateTime.utc(2000, 1, 1, 18, 41), luxon.DateTime.utc(2000, 1, 1, 22, 2)];
// Create an array of ISO strings
let datetimes_isos = [];
datetimes.forEach(function(item, index, array) {
datetimes_isos.push(item.toISO());
});
// Chart's data
let data = [{ x: datetimes_isos[0], y: 0 }, { x: datetimes_isos[1], y: 10 }, { x: datetimes_isos[2], y: 20 }, { x: datetimes_isos[3], y: 40 }, { x: datetimes_isos[4], y: 50 }, { x: datetimes_isos[5], y: 60 }];
const chartData = {
labels: datetimes_isos,
datasets: [{ data: data }]
};
const config = {
type: 'line',
data: chartData,
options: {
scales: {
x: {
type: 'time',
ticks:{
source:'data'
},
time: {
unit: "minute"
},
}
},
},
};
var theChart = new Chart(ctx, config);
</script>
</body>
</html>关于javascript - 在 Chart.js >3.0 中，在时间类型轴上，如何仅显示现有数据点的标签和刻度(使标签反射(reflect)数据)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67491746/