如何将自定义工具提示添加到treeMap

时间:2020-06-03 06:48:34

标签: javascript angular charts google-visualization

我正在尝试为Google treeMap创建自定义工具提示,但是我正在使用angular-google-charts库 我在html中以指令的形式提供图表的数据表

示例:

<google-chart
#chartGeographic
[type]="type"
[data]="chartData"
[columnNames]="columnNames"
[options]="options"
[dynamicResize]="true"
class="chart-init">

[已更新]

这是html后面的类型脚本代码:

 export class GeographicChartComponent implements OnInit {
  chartData: any[][];
  options = {
    headerHeight: 0,
    showScale: true,
    dataTable: this.chartData,
    minColor: '#dd4477',
    midColor: '#0099c6',
    maxColor: '#ff9900',
    highlightOnMouseOver: true,
    generateTooltip: this.showStaticTooltip,
  };
  type = 'TreeMap';
  decimalFormatPipe: DecimalFormatPipe;
  totalRecords: number;
  columnNames = ['Country', 'Parent', 'Percentage'];

  @Input()
  clientId: string;

  @Input()
  currencyId: string;

  @Input()
  date: string;

  @ViewChild('chartGeographic', { static: false })
  chartGeographic: GoogleChartComponent;

  @ViewChild('divParent', { static: true })
  divParent: ElementRef;

  constructor(
    private clientDashboardService: ClientDashboardService,
  ) {}

  ngOnInit() {
    this.gridsterItemSubject.subscribe((event) => {
      if (
        !isNullOrUndefined(event) &&
        event.componentName === 'geographicchart'
      ) {
        this.redrawChart(event.setting);
      }
    });
    this.decimalFormatPipe = new DecimalFormatPipe();
    this.totalRecords = 0;
    this.resetChartData();
  }


  initializeChartSettings() {
    if (this.chartGeographic && this.chartGeographic.wrapper) {
      const width = Number(this.divParent.nativeElement.clientWidth);
      const height = Number(this.divParent.nativeElement.clientHeight);

      this.chartGeographic.wrapper.setOption(
        'width',
        width <= 150 ? 150 : width - 4
      );
      this.chartGeographic.wrapper.setOption(
        'height',
        height <= 150 ? 150 : height - 4
      );
      this.chartGeographic.wrapper.draw();
    }
  }

  getCountryInvestments() {
    if (
      !isNullOrUndefined(this.clientId) &&
      !isNullOrUndefined(this.currencyId) &&
      !isNullOrUndefined(this.date)
    ) {
      this.clientDashboardService
        .getInvestmentsByCountry(this.clientId, this.currencyId, this.date)
        .pipe(
          takeWhile(() => !this.isDestroyed),
          // filter(response => !isNullOrUndefined(response)),
          tap((response) => {
            this.totalRecords = response.length;
            this.chartData = Array<Array<any>>();

            // Creating seed global record reference in the data array
            const globalArray: any[] = new Array();
            globalArray.push(
              this.appTranslationService.getCurrentLanguage() === 'ar'
                ? 'Global'
                : 'Global',
              null,
              0
            );
            this.chartData.push(globalArray);

            for (const item of response) {
              const countryJson: any[] = new Array();
              countryJson.push(
                this.appTranslationService.getCurrentLanguage() === 'ar'
                  ? item.countryAr
                  : item.countryEn,
                'Global',
               this.decimalFormatPipe.transform(item.value)
              );
              this.chartData.push(countryJson);
            }
            this.initializeChartSettings();
          })
        )
        .subscribe();
    }
  }


  showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid"> Value : ' +
     size + '</div>';
  }

chartData 是未定义的,我要做的是设置 chartData 表的两个属性以在treeMap图表的工具提示中显示它们

0 个答案:

没有答案
相关问题