Angular Y轴显示时间-气泡图

我在年遇到了

气泡图
（最新添加）。我试图根据Y轴上的时间和X轴上的值显示数据。
我的数据类似于x:[10,35,60]和y:[7.00am]，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>

这个Y轴只支持数字，但我想绑定时间，比如上午11:15

我想要什么

您可以使用自定义标签格式化程序来显示时间值而不是数字

次数=[
“凌晨3点”，
“上午7:00”，
“上午11:00”，
“下午三点”，
“下午7:00”，
“晚上11:00”，
]
公共bubbleChartOptions:ChartOptions={
回答：是的，
比例：{
xAxes:[{ticks:{min:0，max:30，}}]，
雅克斯：[{
滴答声：{
最小值：0，最大值：5，
callback:value=>this.times[value]
}
}]
}
};
公共bubbleChartData:ChartDataSets[]=[
{
数据：[
{x:7，y:0，r:8}，
{x:10，y:1，r:10}，
{x:15，y:2，r:15}，
{x:26，y:3，r:23}，
],
标签：“A系列”，
},
];

看看这个例子

以下是图像输出：


 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',
    },
  ];