angular - 在 Y 轴上显示时间 - 气泡图
问题描述
我在ng2-charts遇到Bubble Chart
(最新添加)。我试图根据 Y 轴的时间和 X 轴的值来显示数据。我的数据就像 x:[10,35,60] 和 y:["7.00 AM"] 并且 r 将具有相同的 x 值。基本上我想显示一个日期的多个数据,但给出的示例数据集与我的数据集不同。你能帮我吗?还有一件事,我想隐藏工具提示。r
示例代码
HTML
<div style="display: block">
<canvas baseChart [datasets]="bubbleChartData" [options]="bubbleChartOptions"
[colors]="bubbleChartColors" [legend]="bubbleChartLegend" [chartType]="bubbleChartType"
(chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
TS
public bubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 10, y: 10, r: 10 },
{ x: 15, y: 5, r: 15 },
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 },
],
label: 'Series A',
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
这个 Y 轴只支持数字,但我想绑定时间11:15 AM
我想要的是
解决方案
您可以使用自定义标签格式化程序来显示时间值而不是数字。
times = [
"3:00 am",
"7:00 am",
"11:00 am",
"3:00 pm",
"7:00 pm",
"11:00 pm",
]
public bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [{ ticks: { min: 0, max: 30, } }],
yAxes: [{
ticks: {
min: 0, max: 5,
callback: value => this.times[value]
}
}]
}
};
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 7, y: 0, r: 8 },
{ x: 10, y: 1, r: 10 },
{ x: 15, y: 2, r: 15 },
{ x: 26, y: 3, r: 23 },
],
label: 'Series A',
},
];
例如,参见这个stackblitz。
这是图像输出: