Necesito hacer dos cosas que he intentado de todas las formas que yo sepa. No me confunda si estoy haciendo preguntas pequeñas. yo solo quiero saber
abajo está mi botón personalizado en highcharts
MI ARCHIVO COMPONENT.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 }, }, } PRIMERA COSA How to change the text in gotit when clicking change button SEGUNDA COSA How to rotate the symbol to 180deg
Puede usar la función de flecha para referirse al contexto de algunas propiedades anteriores.
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}`, } } }, }; }A continuación, su cambio debe pasarse a alguna parte, tenga en cuenta que cuando hace clic en él, debe actualizarlo a través de chartRef, es decir, haciendo referencia a la referencia del gráfico.
updateChart(): void { this.chartRef.title.update({ text: 'Title was updated', }); this.chartRef.exporting.update({ buttons: { gotit: { text: `${this.counter}`, } } }); }En los documentos de envoltura oficiales, encontrará cómo cargar el módulo de exportación en Highcharts en Angular.
Verifique las opciones de este documento para el botón de exportación.
Demostración: https://stackblitz.com/edit/highcharts-angular-basic-line-gh8gsg
EDITAR -----
Para cambiar la rotación del símbolo, la mejor opción será implementar el símbolo como forma personalizada con rotación
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
Demostración: https://jsfiddle.net/BlackLabel/ansk53cy/