我想知道如何使用的onclick()函数和符号在highcharts我使用它在角.请告诉我

Question

我需要做两件事，据我所知，我已经尝试了所有的方法。如果我问的是一些小问题，请不要误会。我只是想知道

下面是我在highcharts中的自定义按钮

我的组件。TS文件

textData = 0; //declared outside the function
chartGenerate(){
chart:{......},
yAxis:{.....},
xAxis:{....},
series:[....],
exporting: {
buttons: {
contextButton: {
menuItems: [.......]
},
change:{
symbol:'triangle',
onclick: function () {
this.textData += 1
},
},
gotit:{
text:this.textData
},
},
}

第一件事就是How to change the text in gotit when clicking change button<<strong>第二件事/strong>How to rotate the symbol to 180deg

Answer 1

您可以使用箭头函数来引用上述某些属性的上下文。

counter = 0;
constructor() {
this.chartOptions = {
exporting: {
buttons: {
change: {
symbol: 'triangle',
onclick: () => {
this.counter += 1;
console.log('change btn, counter:',this.counter)
}
},
gotit: {
text: `${this.counter}`,
}
}
},
};
}

接下来，你的更改必须传递到某个地方，注意当你点击它时，你必须通过chartRef更新它，即引用图表参考。

updateChart(): void {
this.chartRef.title.update({
text: 'Title was updated',
});
this.chartRef.exporting.update({
buttons: {
gotit: {
text: `${this.counter}`,
}
}
});
}

在官方的包装器文档中，你可以找到如何在Angular中加载Highcharts中的导出模块。

出口检查这个文档选项按钮。

演示:https://stackblitz.com/edit/highcharts-angular-basic-line-gh8gsg

编辑,

要改变符号旋转，最好的选择是实现符号自定义形状与旋转

Highcharts.SVGRenderer.prototype.symbols.download = function(x, y, w, h) {
var path = [
// Arrow stem
'M', x + w * 0.5, y,
'L', x + w * 0.5, y + h * 0.7,
// Arrow head
'M', x + w * 0.3, y + h * 0.5,
'L', x + w * 0.5, y + h * 0.7,
'L', x + w * 0.7, y + h * 0.5,
];
return path;
};
Highcharts.chart('container', {
exporting: {
buttons: {
contextButton: {
symbol: 'download'
}
}
}
});

API: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.symbol

演示:https://jsfiddle.net/BlackLabel/ansk53cy/