Как отключить всплывающую подсказку в ng-apexchart

#javascript #css #angular #apexcharts

#javascript #css #angular #apexcharts

Вопрос:

Я интегрирую диаграмму apex в свое приложение angular, реализуя линейную диаграмму apex. Я хочу скрыть всплывающую подсказку, которую пытались использовать с включенной опцией: false. но не работает. даже не удается установить пользовательскую всплывающую подсказку на линейную диаграмму. при наведении курсора мыши на серию отображается некоторая пунктирная вертикальная линия, мне нужно скрыть всплывающую подсказку или скрыть пунктирную вертикальную линию и создать пользовательскую всплывающую подсказку.

любое предложение было бы очень полезно. Спасибо.

 import { Component, ViewChild, OnInit } from '@angular/core';

import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexDataLabels,
  ApexTitleSubtitle,
  ApexStroke,
  ApexGrid,
  ApexLegend,
  ApexTooltip,
  ApexYAxis,
} from 'ng-apexcharts';

export interface ChartOptions {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  dataLabels: ApexDataLabels;
  grid: ApexGrid;
  stroke: ApexStroke;
  title: ApexTitleSubtitle;
  legend: ApexLegend;
  tooltip: ApexTooltip;
}
@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css'],
})
export class LineChartComponent implements OnInit {
  @ViewChild('lineChart') lineChart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {}

  ngOnInit(): void {
    this.chartOptions = {
      series: [
        {
          name: 'Desktops',
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
        },
        {
          name: 'Laptops',
          data: [22, 55, 66, 77, 88, 99, 90, 110, 170],
        },
      ],
      chart: {
        height: 350,
        type: 'line',
        zoom: {
          enabled: false,
        },
        toolbar: {
          tools: {
            download: false,
          },
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'straight',
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5,
        },
      },
      yaxis: {
        tooltip: {
          enabled: false,
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        tooltip: {
          enabled: false,
        },
      },
      legend: {
        show: false,
        onItemClick: {
          toggleDataSeries: false,
        },
        onItemHover: {
          highlightDataSeries: false,
        },
      },
      tooltip: {
        enabled: false,
        enabledOnSeries: undefined,
        marker: {
          show: false,
        }
      }
    };
  }
}  
 <apx-chart
      [series]="chartOptions.series"
      [chart]="chartOptions.chart"
      [xaxis]="chartOptions.xaxis"
      [dataLabels]="chartOptions.dataLabels"
      [grid]="chartOptions.grid"
      [stroke]="chartOptions.stroke"
      [title]="chartOptions.title"
      #lineChart
    ></apx-chart>  

скриншот

Ответ №1:

У вас отсутствует атрибут всплывающей подсказки в вашем компоненте

 <apx-chart
  ...
  [tooltip]="chartOptions.tooltip"
  #lineChart
></apx-chart>
  

Комментарии:

1. Спасибо, спас мой день. @junedchipa не могли бы вы рассказать, пожалуйста, как я могу реализовать древовидную диаграмму с помощью apexchart.

2. Извините, диаграмма treemap еще недоступна в ApexCharts.

3. Я обновил изображение в вопросе, оно показывает некоторое отображение при наведении курсора на столбец, есть ли какая-либо опция, позволяющая скрыть эту синюю тень?