预览: 我在Angular 7应用程序中使用chart.js。我想知道,单个折线图上可能有2个数据集。
详细信息: 在我的X轴上,我有与时间相关的数据,Y轴上包含数字。基于API响应(返回时间戳和数字),我可以生成折线图。但是我想在同一行上有第二个数据集。第二个数据集相关的API响应,给了我时间戳,所以我想使用该时间戳到投影点(可能是不同的颜色)以单行显示。
this.chart = new Chart(ctx, {
type: 'line',
data: this.getChartAxisData(),
options: this.getChartOptions()
});
getChartAxisData() {
const first: any[] = this.listOne.map((data) => (new Date(data.date)));
const firstArray: any[] = this.listOne.map((data) => data.number);
const second: any[] = this.listTwo.map((data) => (new Date(data.date)));
return {
labels: first,
datasets: [
{
data: firstArray
}
]
};
}
getChartOptions() {
return {
scales: {
xAxes: [{
type: 'time',
time: {
max: this.endDate,
min: this.startDate,
displayFormats: {
'millisecond': 'hh:mm A',
'second': 'hh:mm A',
'minute': 'hh:mm A',
'hour': 'hh:mm A',
'day': 'DD-MMM',
'week': 'DD-MMM',
'month': 'DD-MMM'
}
}
}],
yAxes: [{
ticks: {
min: 0,
max: 800
}
}]
}
};
}