جاوااسکریپت - انگولار - ngx چارتها - چگونه نمایش tooltip هنگام فرمان

من در حال تلاش برای ایجاد یک کامپوننت افسانهای سفارشی هستم که هر ورودی داده یک نوار پیشرفت متریال مخصوص به خود داشته باشد. اگر هر یک از ورودیها هاور شود، میخواهم راهنمای ابزار نمودار پای روی ورودی داده مربوطه نمایش داده شود.

این قالب من است:

<ngx-charts-pie-chart
    #pieChart
    ...
>
    <ng-template #tooltipTemplate let-model="model">
        <div style="padding: 5px;">
            <pre>{{ model.name }}</pre>
            <p style="font-size: 1rem;">{{ model.value | currency:'EUR':true }}</p>
        </div>
    </ng-template>
</ngx-charts-pie-chart>

<app-portfolio-preview-card-positions
    [portfolioHoldings]="portfolio.holdings"
    [portfolioTotal]="portfolio.total"
    (onPositionHovered)="positionHovered($event)"
></app-portfolio-preview-card-positions>

مشکلی که با آن مواجه هستم این است که نمیتوانم بهطور صریح tooltip را با استفاده از مرجع قالب نمایش دهم، به این صورت:

@ContentChild('tooltipTemplate') tooltipTemplate!: TemplateRef<any>;
@ViewChild('pieChart') pieChart!: PieChartComponent;
...
positionHovered(name: string) {
    // Here I want to set the argument as the pie chart active entry and display its tooltip
    this.pieChart.activeEntries = [{name: name}, ...this.pieChart.activeEntries];
    this.pieChart.activate.emit({ value: {name: name}, entries: this.pieChart.activeEntries });
    console.log(this.tooltipTemplate);
}

به نظر میرسد tooltipTemplate همیشه در اینجا undefined باشد.

چه چیزی را از دست میدهم تا بتوانم راهنمای ابزار را هنگام دستور فراخوانی کنم؟ آیا این حتی ممکن است؟

پاسخ شماره ۱

پیادهسازی توضیحات ابزار در ngx-charts

در component.html

<ngx-charts-pie-chart #pieChart [options]="pieChartOptions.options">
    <ng-template #tooltipTemplate let-model="model">
    </ng-template>
</ngx-charts-pie-chart>

در component.ts
کلید-مقدار tooltips را در گزینههای پیکربندی اضافه کنید

@Component()
export class PieChartComponent {
   public pieChartOptions = {  
          options: {   
             tooltips: {
             shadowOffsetX: 1,
             shadowOffsetY: 1,
             shadowBlur: 8,
             shadowColor: "rgba(0, 0, 0, 0.25)",
             backgroundColor: "#fff",
             titleFontColor: "#000",
             bodyFontColor: "#000",
          }
       }
    }
}