मैं अपने कोणीय ऐप में शीर्ष चार्ट को एकीकृत कर रहा हूं, शीर्ष रेखा चार्ट को लागू कर रहा हूं। मैं सक्षम विकल्प के साथ आजमाए गए टूल-टिप को छिपाना चाहता हूं: झूठा। लेकिन काम नहीं कर रहा। कस्टम टूल-टिप को लाइन चार्ट पर सेट करने में भी सक्षम नहीं है। जब श्रृंखला पर होवर होता है तो यह कुछ धराशायी लंबवत रेखा प्रदर्शित कर रहा है, मुझे टूल-टिप को छिपाने या धराशायी लंबवत रेखा को छिपाने और कस्टम टूल-टिप बनाने की आवश्यकता है।

कोई सुझाव बहुत मददगार होगा। धन्यवाद।

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>
screenshott
0
Lakhan Khandelwal 11 सितंबर 2020, 10:00

1 उत्तर

सबसे बढ़िया उत्तर

आप अपने घटक में टूलटिप विशेषता खो रहे हैं

<apx-chart
  ...
  [tooltip]="chartOptions.tooltip"
  #lineChart
></apx-chart>
1
junedchhipa 11 सितंबर 2020, 12:38