如何在 chart.js 自定义工具提示界面中访问 class 变量
how to access class variables inside chart.js custom tooltip interface
在点击事件工具提示下的自定义工具提示中的以下代码片段中,class 变量在我尝试使用它时无法访问,它仅显示与 ChartElement 相关的值
@Output() valuechange = new EventEmitter<any>();
options: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
mode: 'nearest',
intersect: false,
enabled: false,
custom(tooltipModel: any) {
// tooltip element
let tooltipEl: any = document.querySelector('#chartjs-tooltip');
// create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.style.width = '124px';
tooltipEl.style.color = 'white';
tooltipEl.style.borderRadius = '6px';
tooltipEl.style.backgroundColor = 'rgba(55, 71, 79, 0.8)';
tooltipEl.innerHTML = '<div style ="display:flex;flex-direction:column">sample tooltip</div>';
document.body.appendChild(tooltipEl);
}
tooltipEl.onclick = () => {
// NOT ABLE TO Access this to emit event
// this.valuechange.emit('test');
console.log('hi); // working
};
}
}
要使this
等于class,写成箭头函数:
custom: () => {
console.log(this); // should be the class
}
但有时您需要 this
和 that
的句柄,其中 this
是 class 而 that
是图表对象。
创建效用函数:
export const thisAsThat = (callBack: Function) => {
const self = this;
return function () {
return callBack.apply(self, [this].concat(Array.prototype.slice.call(arguments)));
};
}
然后:
import { thisAsThat } from './where/thisAsThat/is/located';
....
custom: thisAsThat((that: any, otherArgument: any) => {
console.log(this); // the class
console.log(that); // the chart object
})
在点击事件工具提示下的自定义工具提示中的以下代码片段中,class 变量在我尝试使用它时无法访问,它仅显示与 ChartElement 相关的值
@Output() valuechange = new EventEmitter<any>();
options: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
mode: 'nearest',
intersect: false,
enabled: false,
custom(tooltipModel: any) {
// tooltip element
let tooltipEl: any = document.querySelector('#chartjs-tooltip');
// create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.style.width = '124px';
tooltipEl.style.color = 'white';
tooltipEl.style.borderRadius = '6px';
tooltipEl.style.backgroundColor = 'rgba(55, 71, 79, 0.8)';
tooltipEl.innerHTML = '<div style ="display:flex;flex-direction:column">sample tooltip</div>';
document.body.appendChild(tooltipEl);
}
tooltipEl.onclick = () => {
// NOT ABLE TO Access this to emit event
// this.valuechange.emit('test');
console.log('hi); // working
};
}
}
要使this
等于class,写成箭头函数:
custom: () => {
console.log(this); // should be the class
}
但有时您需要 this
和 that
的句柄,其中 this
是 class 而 that
是图表对象。
创建效用函数:
export const thisAsThat = (callBack: Function) => {
const self = this;
return function () {
return callBack.apply(self, [this].concat(Array.prototype.slice.call(arguments)));
};
}
然后:
import { thisAsThat } from './where/thisAsThat/is/located';
....
custom: thisAsThat((that: any, otherArgument: any) => {
console.log(this); // the class
console.log(that); // the chart object
})