如何解决如何自定义y轴标签并从Chart js中的x轴数据范围中随机选择值
我一直在使用Charts.js制作图表,该图表显示每天的锻炼时间。 y轴应具有日期,x轴应具有序列的持续时间, 这是我的数据集:
public lineChartData: ChartDataSets[] = [
{ data: [65,19,40,81,56,5,40],label: 'Series A' },{ data: [95,69,96,label: 'Series B' },{ data: [65,74,41,54,55,label: 'Series C' }
];
public lineChartLabels: Label[] = ['2020/05/20','2020/05/21','2020/05/22','2020/05/23','2020/05/24','2020/05/25'];
到目前为止,我找不到与实现相关的任何信息,如果有人可以帮助我,这将非常有帮助。 我已经尝试过使用水平条形图进行水平堆叠,我们需要像LINE CHART一样 这是stackblitz link
解决方法
您需要使用scatter
图表并在每个数据集上定义选项showLine: true
。此外,您必须将y轴定义为time cartesian axis,如下所示。
yAxes: [
{
type: "time",time: {
parser: "YYYY/MM/DD",unit: "day",displayFormats: {
day: "YYYY/MM/DD"
}
},ticks: {
reverse: true
}
}
]
由于散点图需要point format中的数据,因此必须在ngOnInit
方法中生成适当的数据结构,如下所示:
ngOnInit() {
this.lineChartData.forEach(ds => {
ds.data = ds.data.map((v,i) => ({ x: v,y: this.lineChartLabels[i] }));
});
}
还要从[labels]="lineChartLabels"
中删除canvas
,以点格式定义数据时不需要这样做。
不幸的是,
ng2-charts
无法应付这种配置,并为数据点和图例标签显示错误的颜色。因此,我还必须从[colors]="lineChartColors"
中删除canvas
并在数据集中定义颜色。 您可能必须摆脱此包装器库,而直接使用Chart.js才能获得预期的结果。
请查看此StackBlitz中的修改代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。