Всплывающая подсказка не работает при наведении в диаграммах ng2, пока инструмент разработчика не останется открытым - PullRequest
Новая
       29

Всплывающая подсказка не работает при наведении в диаграммах ng2, пока инструмент разработчика не останется открытым

0 голосов
/ 01 апреля 2020

Я использую ng2-диаграммы, линейный график в моем проекте. В настоящее время все загружено правильно, кроме всплывающей подсказки. Когда я наведу курсор на определенную точку и инструмент разработчика не открыт, подсказка никогда не появляется на экране. Когда я открою инструмент разработчика и наведу указатель мыши на точку в строке, появится всплывающая подсказка с соответствующей информацией. Ниже приведен код. 

<canvas baseChart width="400" height="100"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                [plugins]="lineChartPlugins"
                (chartHover)="chartHovered($event)"></canvas>

Код машинописного текста ниже 

  import { Component, OnInit } from '@angular/core';
  import {DashboardService} from 'src/app/dashboard/dashboard.service';
  import {Summary,CountryDetails,CountryByDate} from 'src/app/entities/DashboardSummary';
  import { ChartDataSets, ChartOptions,ChartPoint } from 'chart.js';
  import { Color, ChartsModule, Label } from 'ng2-charts';
  import * as pluginAnnotations from 'chartjs-plugin-annotation';

Параметры диаграммы и другие подробности 

public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{}],

      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
        }
      ]
    },
    annotation: {
      annotations: [
        {
          type: 'line',
          mode: 'vertical',
          scaleID: 'x-axis-0',
          value: 'March',
          borderColor: 'orange',
          borderWidth: 2,
          label: {
            enabled: true,
            fontColor: 'orange',
            content: 'LineAnno'
          }
        },
      ],
    },
  };
public lineChartColors: Color[] = [{}];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [pluginAnnotations];

Функция включения 

public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }
...