我有一个呈现图表的组件,我想在格式化程序的帮助下用看起来像这样的数据覆盖初始工具提示:
tooltip: {
formatter: function () {
console.log(this);
// logs data described aboved code snippet
console.log(this.filterService.getFilters());
// logs undefined as its component method
}
}
console.log(this)
在图表上记录有关悬停项目的数据,如下所示:
{
x: "xxxxx",
y: 94,
color: "#58a310",
colorIndex: 0,
key: "xxxxx",
series: e {proceed: null, chart: a.Chart, userOptions: {…}, tooltipOptions: {…},
stickyTracking: false, …},
point: C {series: e, color: "#58a310", y: 94, options: {…}, isNull: false, …},
percentage: 60.256410256410255,
total: 156,
...
}
而且我需要来自服务的一些数据,该组件使用该数据,因此我可以通过使用箭头func进行格式化来访问它:
tooltip: {
formatter: () => {
// here `this` refers to component class
console.log(this.filterService.getFilters());
// logs filters data, which I need
}
}
因此,我需要这两个(图表项目数据和过滤器)来执行我想要的操作,但看不到同时获得它们的方法,只有一个或另一个取决于我声明func的方式。
您可以使用IIFE函数来存储组件引用:
tooltip: {
formatter: (function(component) {
return function() {
console.log(component, this);
}
})(this)
}