Javascript 如何向树状图添加自定义工具提示

我试图为谷歌树状图创建一个自定义工具提示，但我使用的是谷歌角形图表库 我将图表的数据表作为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>';
  }

导出类组件实现OnInit{
图表数据：任何[][]；
选项={
人头数:0,，
showScale：没错，
dataTable:this.chartData，
minColor:“#dd4477”，
中色：“#0099c6”，
maxColor:“#ff9900”，
没错，
generateTooltip:this.showStaticTooltip，
};
类型='TreeMap'；
decimalFormatPipe：decimalFormatPipe；
总数记录：数字；
columnNames=['Country'，'Parent'，'Percentage']；
@输入（）
clientId：字符串；
@输入（）
currencyId:字符串；
@输入（）
日期：字符串；
@ViewChild（'chartGeographic'，{static:false}）
图表地理：谷歌图表组件；
@ViewChild（'divParent'，{static:true}）
divParent:ElementRef；
建造师(
专用clientDashboardService:clientDashboardService，
) {}
恩戈尼尼特（）{
this.gridsterItemSubject.subscribe（（事件）=>{
如果(
！isNullOrUndefined（事件）&&
event.componentName==='geographicchart'
) {
此.重绘图表（事件.设置）；
}
});
this.decimalFormatPipe=新的decimalFormatPipe（）；
this.totalRecords=0；
这是resetChartData（）；
}
initializeChartSettings（）{
if（this.chartgographic&&this.chartgraphic.wrapper）{
const width=Number（this.divParent.nativeElement.clientWidth）；
const height=Number（this.divParent.nativeElement.clientHeight）；
this.chartGeographic.wrapper.setOption(
“宽度”，
宽度！isNullOrUndefined（响应）），
轻触（（响应）=>{
this.totalRecords=response.length；
this.chartData=Array（）；
//在数据数组中创建种子全局记录引用
常量globalArray:any[]=新数组（）；
推地球阵列(
此.appTranslationService.getCurrentLanguage（）=='ar'
“全球”
：“全球”，
无效的
0
);
这个.chartData.push（globalArray）；
用于（响应的常数项）{
const countryJson:any[]=新数组（）；
countryJson.push(
此.appTranslationService.getCurrentLanguage（）=='ar'
？项目1.r
：item.countryEn，
"全球",，
this.decimalFormatPipe.transform（item.value）
);
this.chartData.push（countryJson）；
}
此参数为.initializeChartSettings（）；
})
)
.subscribe（）；
}
}
showStaticTooltip（行、大小、值）{
返回“值：”+
大小+''；
}

---

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

请编辑问题并添加其余代码？需要查看图表数据的生成或接收位置。以及

showStaticTooltip

适合wi的位置剩下的代码…我更新了代码，以防万一我想告诉你，我尝试使用文档中表示的相同方式，但结果是我编写了java脚本代码而不是ts代码，我还需要导入

，让google名称空间工作，所以如果有任何方法可以让它在使用angular go时工作的话查看图表，仅依靠ts，我将非常感谢您的帮助。当您尝试访问

chartData

时，是否使用-->

this.chartData

？是的，我使用了this.chartData，并尝试在

showStaticTooltip

方法中登录

this.chartData

的值及其返回的unfinedok，查看您是否可以访问-->

this.chartGeographic.wrapper.getDataTable（）

--在

showStaticTooltip

中，请编辑问题并添加其余代码好吗？需要查看图表数据的生成或接收位置。以及

showStaticTooltip

与其余代码的匹配位置……我更新了代码，以防我想告诉您，我尝试使用了中表示的相同方式文档和它的工作，但我最终写的是java脚本代码而不是ts代码，我还需要导入

，让google名称空间工作，所以如果有任何方法可以让它在使用角度谷歌图表和依靠ts时工作，我将感谢您的帮助se-->

this.chartData

--？是的，我确实使用了this.chartData，并尝试将

this.chartData

的值登录到

showStaticTooltip

方法及其返回的unfinedok中，查看您是否可以访问-->

this.chartgography.wrapper.getDataTable（）

--在

showStaticTooltip