本文介绍了x轴标签的位置与折线图数据点不同步的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下图表设置：
const data = [{
name: "series1",
series: [{
date: "2016-01-31T00:00:00.000Z",
value: 8
},
{
date: "2016-02-28T00:00:00.000Z",
value: 10
},
{
date: "2016-03-30T00:00:00.000Z",
value: 12
},
{
date: "2016-04-31T00:00:00.000Z",
value: 15
},
{
date: "2016-05-31T00:00:00.000Z",
value: 14
},
{
date: "2016-06-30T00:00:00.000Z",
value: 16
},
{
date: "2016-07-31T00:00:00.000Z",
value: 17
}
]
}, {
name: "series2",
series: [{
date: "2016-01-31T00:00:00.000Z",
value: 5
},
{
date: "2016-02-28T00:00:00.000Z",
value: 7
},
{
date: "2016-03-30T00:00:00.000Z",
value: 10
},
{
date: "2016-04-31T00:00:00.000Z",
value: 13
},
{
date: "2016-05-31T00:00:00.000Z",
value: 12
},
{
date: "2016-06-30T00:00:00.000Z",
value: 14
},
{
date: "2016-07-31T00:00:00.000Z",
value: 15
}
]
}];
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'green',
borderColor: 'green',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>问题是x轴标签的位置与折线图数据点不同步。需要帮助。
The problem is that position of the x-axis labels is not in sync with the line chart data points. Need help.
推荐答案
问题是所有 date 值都与一个月的最后一天。我在您的代码示例中添加了函数 toFirstDayOfMonth ，以进一步转换数据以获得预期结果。
The problem is that all date values correspond to the last day of a month. I added the function toFirstDayOfMonth in your code sample to further transform the data in order to obtain the expected result.
function toFirstDayOfMonth(dateString) {
const date = new Date(dateString);
date.setDate(1);
return date;
}
或者，您也可以按以下方式编写此函数，仅考虑年份和月份 date 字符串的值。
Alternatively you could also write this function as follows to only consider the year and month of your date string.
function toFirstDayOfMonth(dateString) {
return new Date(dateString.substring(0, 7));
}
请查看修改后的代码。
const data = [{
name: "series1",
series: [{
date: "2016-01-31T00:00:00.000Z",
value: 8
},
{
date: "2016-02-28T00:00:00.000Z",
value: 10
},
{
date: "2016-03-31T00:00:00.000Z",
value: 12
},
{
date: "2016-04-30T00:00:00.000Z",
value: 15
},
{
date: "2016-05-31T00:00:00.000Z",
value: 14
},
{
date: "2016-06-30T00:00:00.000Z",
value: 16
},
{
date: "2016-07-31T00:00:00.000Z",
value: 17
}
]
}, {
name: "series2",
series: [{
date: "2016-01-31T00:00:00.000Z",
value: 5
},
{
date: "2016-02-28T00:00:00.000Z",
value: 7
},
{
date: "2016-03-31T00:00:00.000Z",
value: 10
},
{
date: "2016-04-30T00:00:00.000Z",
value: 13
},
{
date: "2016-05-31T00:00:00.000Z",
value: 12
},
{
date: "2016-06-30T00:00:00.000Z",
value: 14
},
{
date: "2016-07-31T00:00:00.000Z",
value: 15
}
]
}];
function toFirstDayOfMonth(dateString) {
const date = new Date(dateString);
date.setDate(1);
return date;
}
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: toFirstDayOfMonth(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'green',
borderColor: 'green',
data: data[1].series.map(x => ({ x: toFirstDayOfMonth(x.date), y: x.value }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: true
},
tooltips: {
mode: 'x'
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
time: {
unit: 'month',
tooltipFormat: 'MMM YYYY'
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>这篇关于x轴标签的位置与折线图数据点不同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！