как установить всплывающую подсказку на ngx-диаграммах в angular

У меня есть ряд графиков, которые нужно отобразить. Я динамически генерирую эти графики, используя приведенный ниже код в цикле for.

<div>
    <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile *ngFor="let item of _homeservice.userDashboardGraphData; let i = index">
            <mat-card style="display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;">
                <h3><u>{{item.graph_title}}</u></h3>
                <ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="item.graph_data"
                    gradient="false" xAxis="true" yAxis="true" [legend]="boolFalse" showXAxisLabel="true"
                    showYAxisLabel="true" [xAxisLabel]="item.x_axis_label" [yAxisLabel]="item.y_axis_label">
                    <ng-template #tooltipTemplate let-model="model">
                        <div class="tooltip">
                            {{model.tool_tip_text}}
                        </div>
                    </ng-template>
                </ngx-charts-bar-vertical>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>
</div>

Все выглядит нормально, кроме всплывающей подсказки, я получаю пустую всплывающую подсказку. Не уверен, что проблема возникает из-за ссылки #tooltipTemplate. введите описание изображения здесь

вот данные моей серии

[
   {name: "Doe, John", tool_tip_text: "Doe, John 00:11:39", value: 699} 
   {name: "Will, Smith", tool_tip_text: "Will, Smith 00:00:52", value: 52} 
   {name: "Joe, Biden", tool_tip_text: "Joe, Biden 00:00:22", value: 22} 
   {name: "Trump, Donald", tool_tip_text: "Trump, Donald 00:00:07", value: 7}
]

angular ngx-charts
person VIRIYALA NARESH    schedule 22.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде все выглядит нормально, возможно, проблема в model, попробуйте добавить текст вроде:

            <ng-template #tooltipTemplate let-model="model">
                <div class="tooltip">
                    MyToolTip: 
                    {{model.tool_tip_text}}
                </div>
            </ng-template>

Просто чтобы убедиться, отображается ли текст во всплывающей подсказке.
в противном случае отметьте эта живая демонстрация, возможно, она вам поможет.

person Elmehdi    schedule 22.11.2020
comment
Когда я использую MyToolTip:, как вы предложили, он работает. Моя модель выглядит так, как показано ниже: {name: test name, value: 100, tool_tip_text: some text}. Когда я использую {{model.name}} или {{model.value}}, он работает нормально, и подсказка показывает значение, однако, когда я использую { {model.tool_tip_text}}, просто отображается пустым. - person VIRIYALA NARESH; 22.11.2020
comment
Когда я показываю всю модель {{модель | json}}, я вижу {name: test name, value: 100, label: some text}, я не вижу в нем ключа tool_tip_text. это то, что вызывает проблему, как я могу ввести в него ключ tool_tip_text. - person VIRIYALA NARESH; 22.11.2020
comment
вот данные моей серии [{name: Doe, John, tool_tip_text: Doe, John 00:11:39, value: 699} {name: Will, Smith, tool_tip_text: Will, Smith 00:00:52, value : 52} {имя: Джо, Байден, tool_tip_text: Джо, Байден 00:00:22, значение: 22} {имя: Трамп, Дональд, tool_tip_text: Трамп, Дональд 00:00:07, значение: 7}] - person VIRIYALA NARESH; 22.11.2020
comment
Попробуйте изменить tool_tip_text на toolTipText - person Elmehdi; 23.11.2020