Jump to content

Recommended Posts

Posted

Carissimos

Preciso de ajuda. Desenvolvi um site que vai buscar dados a uma base de dados e por intermedio do Highcharts permite a visualizar os mesmos graficamente.

Mas eu precisava que ao efectuar o export ele me incluisse uma imagem, ou seja um logotipo.

o script é o seguinte:

 <script type="text/javascript">

$(function () {
   var chart;
   $(document).ready(function() {
    chart = new Highcharts.Chart({
	    chart: {
		    renderTo: 'container',
		    type: 'scatter',
		    marginRight: 130,
		    marginBottom: 25,
	    },
	    title: {
		    text: 'Amp',  
   /* Cabeçalho do Gráfico - Título da Grandeza que está a ser lida */
		    x: -20 //center

	    },
	    subtitle: {
		    text: '.:Lactogal:.',   /* Cabeçalho do Gráfico - Nome do Cliente */
		    x: -20
	    },
		 xAxis: {
		    categories: [<?php echo $teste; ?>]
	    },
	    yAxis: {
		    title: {
			    text: 'Amp'
		    },
		    plotLines: [{
			    value: 0,
			    width: 1,
			    color: '#808080'
		    }]
	    },
	    tooltip: {
		    formatter: function() {
  //img.src = 'image/view.png';
				    return '<b>'+ this.series.name +'</b><br/>'+
				    this.x +': '+ this.y +'°C';

		    }
	    },
  legend: {
		  //  layout: 'vertical',
		   // align: 'right',
		    //verticalAlign: 'top',
		    x: -10,
		    y: 100,
		    borderWidth: 0
	    },
  exporting:{
		    chartOptions:{
			    title: {
				    text:'aaaaa'
			    }
		    }
	    },
	    series: [{
		    name: 'Amp [mV]',	   /* legenda da serie um de valores*/
		    data: [<?php $columnValues = Array();

while ( $row = mysql_fetch_assoc($result3) ) {
 $columnValues[] = $row['A1 (V)'];echo $row['A1 (V)'].',';
  }


  unset($_POST['submit']);

  ?>]
	    }]

    });
   });

});
$('#getcsv').click(function () {
   alert(chart.getCSV());
});
 </script>

Apercebi-me que ao introduzir

exporting:{
		    chartOptions:{
			    title: {
				    text:'aaaaa'
			    }
		    }
	    }

ele apresenta apena no export o texto 'aaaaa'......Precisava neste campo incluir uma imagem....

Alguém me pode ajudaR?

Obrigado

Posted

boas

experimentei da seguinte forma:

chartOptions:{
			    title: {
  text:"<img src='view.png' />",
			   useHTML: true,
				   //text:'aaaaa',

			    }

não resultou, usei o teu exemplo também não resultou....penso que deve estar relacionado com text:

Posted

http://www.highcharts.com/docs/chart-concepts/label-and-string-formatting

HTML in Highcharts

Texts and labels in Highcharts are given in HTML, but as the HTML is parsed and rendered in SVG, only a subset is supported. The following tabs are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

Posted (edited)

Atendendo ao link do @nelsonr, o HTML não suporta o tipo de dados <img>.

Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled

Olhando para isto, também não me parece que seja possível utilizar a propriedade <background-image> do span. Quando se refere a text-related acho que quer dizer propriedades como por exemplo: text-decoration, font-size, text-shadow..etc.

Edited by bioshock
Posted

Eu consegui colocar a ir buscar uma imagem, mas foi para o eixo do x.

xAxis: {


		    categories: [<?php echo $teste; ?>],
   labels: {
	   formatter: function() {
		    return '<img src="http://highcharts.com/demo/gfx/sun.png" alt="" />'+ this.value;
	    },
	    useHTML: true
    }


Vou tentar agora colocar no cabeçalho do gráfico e de forma que no export a imagem seja colocada, pois da forma que está sempre que faço o export para por exemplo pdf ou jpg a imagem não aparece

Posted

Carissimos

Consegui resolver o meu problema.

Para colocar um background no gráfico

chart = new Highcharts.Chart({
	    chart: {
		    renderTo: 'container',
		    type: 'scatter',
		    marginRight: 100,
		    marginBottom:100,
   marginTop:150,
  plotBackgroundImage: 'logo_grafico.png',
}
}

para colocar um logo

events: {
	    load: function() {
		    this.renderer.image(

   'http://creatingimages.net/plataformaeq/logodiveil.png', 80,5, 80, 60)
			    .add();
	    }
    }
	    },

Thanks pela ajuda

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.