javascript - Chart js气泡图气泡内的数字

Question

我正在使用 ng2-charts 来获取图片中提到的这种类型的气泡图。我也安装了 chart-js 插件，但我无法获得气泡内的数字。

期望：在泡泡里面我想像这样写1、2、3这样的数字

这是我的 html 离子代码

<div style="display: block">
   <canvas baseChart 
        [datasets]="bubbleChartData"
        [options]="bubbleChartOptions"
        [colors]="bubbleChartColors"
        [legend]="bubbleChartLegend"
        [chartType]="bubbleChartType">
    </canvas>
</div>

这也是我描述 ng2-charts 的打字稿代码

export class DashboardPage {
 bubbleChartOptions: ChartOptions = {
   responsive: true,
   scales: {
     xAxes: [
       {
         display: true,
         girdlines: { drawTicks: false, drawBorder: false, display: true}
         ticks: {display: false, stepSize: 1, min: 1, max: 7 }
       }
     ],
     yAxes: [
       {
         display: false,
         girdlines: { drawTicks: false, display: true}
         ticks: {display: false, stepSize: 1, min: 0, max: 10 }
       }
     ],
}
};
bubbleChartData: ChartDataSets[] = [
{
  data: [
    { x: 1, y: 2, r: 8, },
    { x: 2, y: 7, r: 8 },
    { x: 3, y: 5, r: 8 },
    { x: 4, y: 3, r: 8 },
    { x: 5, y: 8, r: 8 },
    { x: 6, y: 1, r: 8 },
    { x: 7, y: 5, r: 8 },
  ],
  label: '20',
  backgroundColor: 'white',
  borderColor: 'blue',
  borderWidth: 2,
  hoverBackgroundColor: 'purple',
  hoverBorderColor: 'red',
  },
 ];
 

标签： javascriptionic-frameworkchart.jsionic4ng2-charts