如何在 chartjs 中跳过多线图中一行的标签?
How to skip labels of a line in multiline graph in chartjs?
我正在尝试使用 chartjs 创建多线图。
在 x 轴上我有日期,在 y 轴上我有一些整数。
我有两条线路,一条用于用户支出,另一条用于收入。
对于收入,我只有 2 个日期但有月份差异的数据。我在图表上的第二个收入点不在正确的日期,它是在下一个支出日期。
我的数据是这样的:
[
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-20', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-21', type: 'expense', amount: 50 },
{ date: '2020-03-22', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'expense', amount: 600 }
]
In labels dates of income are 2020-02-24 and 2020-03-24
和
rest of the dates are of expenses
这是我的数据集:
{
labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: [ 100, 830, 50, 560 ],
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: [ 900, 600 ],
}
]
};
您不能定义 data.labels
,因为它们会被两个数据集考虑。相反,您应该使用包含 x
和 y
属性的对象单独定义每个数据点。
data: [
{ x: '2020-02-24', y: 900 },
{ x: '2020-03-24', y: 600 }
]
在下面的可运行代码片段中,我使用 filter()
and map()
.
从您的基础数据数组中构建了 data
个单独的数据集
const data = [
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-15', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-25', type: 'expense', amount: 50 },
{ date: '2020-03-28', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'income', amount: 600 }
];
var worldChart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>
我正在尝试使用 chartjs 创建多线图。 在 x 轴上我有日期,在 y 轴上我有一些整数。 我有两条线路,一条用于用户支出,另一条用于收入。 对于收入,我只有 2 个日期但有月份差异的数据。我在图表上的第二个收入点不在正确的日期,它是在下一个支出日期。
我的数据是这样的:
[
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-20', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-21', type: 'expense', amount: 50 },
{ date: '2020-03-22', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'expense', amount: 600 }
]
In labels dates of income are 2020-02-24 and 2020-03-24
和
rest of the dates are of expenses
这是我的数据集:
{
labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: [ 100, 830, 50, 560 ],
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: [ 900, 600 ],
}
]
};
您不能定义 data.labels
,因为它们会被两个数据集考虑。相反,您应该使用包含 x
和 y
属性的对象单独定义每个数据点。
data: [
{ x: '2020-02-24', y: 900 },
{ x: '2020-03-24', y: 600 }
]
在下面的可运行代码片段中,我使用 filter()
and map()
.
data
个单独的数据集
const data = [
{ date: '2020-02-24', type: 'income', amount: 900 },
{ date: '2020-03-15', type: 'expense', amount: 100 },
{ date: '2020-03-20', type: 'expense', amount: 830 },
{ date: '2020-03-25', type: 'expense', amount: 50 },
{ date: '2020-03-28', type: 'expense', amount: 560 },
{ date: '2020-03-24', type: 'income', amount: 600 }
];
var worldChart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: 'Expenses',
fill: false,
lineTension: 0.5,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
},
{
label: 'Income',
fill: false,
lineTension: 0.5,
backgroundColor: 'blue',
borderColor: 'red',
borderWidth: 2,
data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>