2012-02-09 57 views
8

Quiero agregar un botón de imagen en los gráficos más altos. Hasta ahora, he creado con éxito un botón de imagen y he adjuntado un evento de clic sobre él. Pero el problema es que la imagen (sun.png) está en el lado izquierdo del gráfico y el botón de imagen está alineado a la derecha (la posición predeterminada de la barra de herramientas). ¿Alguna solución para esto?Highcharts: Agregar un botón de imagen personalizada

exporting: { 
    buttons: { 
     popUpBtn: { 
      symbol: 'url(images/sun.png)', 
      _titleKey: 'popUpBtnTitle', 
      x: -10, 
      symbolFill: '#B5C9DF', 
      hoverSymbolFill: '#779ABF', 
      onclick: function() { 
       alert('ad'); 
       popUpChart($(this)); 
      } 
     }, 
     exportButton: { 
      enabled: false 
     }, 
     printButton: { 
      enabled: false 
     } 

    } 
} 

Además, si existen otros métodos para agregar una imagen de mapa que tiene haga clic en evento, esos métodos son bienvenidos también.

+0

Hola, quiero el mismo tipo de funcionalidad, después de hacer clic en un botón en el gráfico quiero que se abra el mismo gráfico en la ventana emergente. Al mirar su código parece que está haciendo lo mismo. ¿Puede decirme qué está haciendo en esta función popUpChart ($ (this)); para mostrarlo en pop-up. – Apparatus

+0

'$ this' en' popUpChart' se refiere a la instancia de Highcharts. Lo uso para obtener opciones de gráficos nuevamente, luego abro una ventana emergente como Fancybox. Y en esa ventana emergente, dibujo el gráfico nuevamente. – Jashwant

+0

Si no te importa, ¿puedes mostrar todo el código porque tengo problemas para hacerlo? – Apparatus

Respuesta

14

Finalmente, lo descubrí así. Puede ser que ayude a otros.

function callback($this){ 
    var img = $this.renderer.image('images/zoom_icon.png',$this.chartWidth-40,5,40,12); 
    img.add(); 
    img.css({'cursor':'pointer'}); 
    img.attr({'title':'Pop out chart'}); 
    img.on('click',function(){ 
       // prcessing after image is clicked 
    }); 

} 

new Highcharts.Chart(charts.params,callback); 

// where charts.params is object which contains options for chart 
+0

¿Podemos agregar otro botón al lado de exportar e imprimir usando esto? –

+1

Sí, definitivamente. Consulte la posición x del botón. '$ this.chartWidth-40'. Está al lado de esos botones. Puedes cambiarlo a cualquier cosa. – Jashwant

+0

Básicamente quiero tres botones allí en lugar de imprimir y exportar. –

Cuestiones relacionadas