javascript - 如何将自定义工具提示添加到 treeMap
问题描述
我正在尝试为 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 图表的工具提示中显示它们
解决方案
推荐阅读
- git - 在 Azure 中,有没有办法在创建/完成拉取请求时使用存储库和/或分支标记工作项/用户故事?
- eclipse - 为什么 Eclipse 遇到 NPE 更新我的 Maven 项目?
- c# - MailKit 附件写入 MemoryStream
- css - 如何在顺风中保持单个网格列的高度
- c++ - std::condition_variable 是否真的在阻塞之前解锁了给定的 unique_lock 对象?
- java - 具有嵌套分组依据的收集器(java 8)
- bluedata - 如何在一个集群中公开 HDFS 并在另一个集群/租户中使用 DataTap 访问它?
- swift - 使用正则表达式替换字符串中的组仅替换最后一个组
- memory-leaks - netty PoolChunk 中积累的内存
- javascript - 如何使用数字数组通过其 id 获取对象列表