隐藏ng2图表中的三个工具提示之一

时间:2019-02-25 09:16:09

标签: angular typescript charts ng2-charts

我使用的气泡图是from 。我为图表数据提供了三个值。一个是x,另一个是y,最后一个是r。这三个都显示在工具提示中,我只希望在工具提示中显示x和y。

HTML

<div style="display: block" *ngIf="ChartData">
<canvas baseChart  width="400" height="180" [datasets]="ChartData" [labels]="ChartLabels" [options]="ChartOptions" [legend]="ChartLegend"
[chartType]="ChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>

TS

    public ChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public ChartLegend:boolean = true;
  public ChartType:string = 'bubble';
  public ChartData:any[] = [
    {
      data:[
        {x:15,y:15.59,r:7.5},
      ],
      label:'Series A',
      backgroundColor:'#FF6384',
      hoverBackgroundColor:'#FF6388'},
}]
}

  public ChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      yAxes: [{
          ticks: {
              beginAtZero: true
          }
      }],
      xAxes: [{
        ticks: {
            beginAtZero: true
        }
    }],

  }
  };

My output

我不需要在工具提示中显示7.5。

1 个答案:

答案 0 :(得分:1)

enter image description here使用angular2-chartjs,因为ng2-charts不再支持气泡图。

StackBlitz Editor

Working Demo