bpereira Posted February 5, 2014 at 10:14 AM Report #544021 Posted February 5, 2014 at 10:14 AM 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
bioshock Posted February 5, 2014 at 10:30 AM Report #544022 Posted February 5, 2014 at 10:30 AM Nunca utilizei isso, mas olhando para API deles, tens duas opções pelos vistos. Usar CSS ou activar o HTML (que por defeito é false). http://api.highcharts.com/highcharts#title title: { text: "<img src='...'/>", useHTML: true } Brinca um bocado com essas opções e talvez consigas.
bpereira Posted February 5, 2014 at 10:47 AM Author Report #544026 Posted February 5, 2014 at 10:47 AM 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:
nelsonr Posted February 5, 2014 at 10:51 AM Report #544028 Posted February 5, 2014 at 10:51 AM http://www.highcharts.com/docs/chart-concepts/label-and-string-formatting HTML in HighchartsTexts 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.
bioshock Posted February 5, 2014 at 11:25 AM Report #544034 Posted February 5, 2014 at 11:25 AM (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 February 5, 2014 at 11:26 AM by bioshock
bpereira Posted February 5, 2014 at 04:12 PM Author Report #544080 Posted February 5, 2014 at 04:12 PM 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
taviroquai Posted February 8, 2014 at 10:37 PM Report #544494 Posted February 8, 2014 at 10:37 PM Esperimenta usa uma div com uma classe css e depois da width, height e background-image na classe css.
bpereira Posted February 12, 2014 at 03:22 PM Author Report #545043 Posted February 12, 2014 at 03:22 PM 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
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now