Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] ¿Como voltear textos de una gráfica creada con highchart?

Estas en el tema de ¿Como voltear textos de una gráfica creada con highchart? en el foro de Javascript en Foros del Web. Pues veréis no tengo ni idea de JavaScript pero me he visto obligado a utilizarlo para hacer una gráfica, el problema que tengo es que ...
  #1 (permalink)  
Antiguo 11/04/2011, 03:55
 
Fecha de Ingreso: septiembre-2008
Ubicación: Valencia
Mensajes: 160
Antigüedad: 13 años, 4 meses
Puntos: 2
Pregunta ¿Como voltear textos de una gráfica creada con highchart?

Pues veréis no tengo ni idea de JavaScript pero me he visto obligado a utilizarlo para hacer una gráfica, el problema que tengo es que en el eje X donde tengo los intervalos de los valores hay tantos que se me superponen así que quería voltearlos cierto número de grados, he buscado por ahí y no hay nada que me puedas servir para lo que quiero...

Si me lo pueden facilitar, a demás les agradecería que me explicaran un poco ese código que me proporcionen como utilizarlo ya que como les he dicho en JavaScript voy pez...

Gracias de antemano.
__________________
Siempre inmerso en nuevos proyectos.

Cuando estoy activo puedes verme en //LiveCoding
  #2 (permalink)  
Antiguo 11/04/2011, 07:36
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 16 años, 7 meses
Puntos: 79
Respuesta: ¿Como voltear textos de una gráfica creada con highchart?

para rotar texto, puedes hacerlo en un div por ejemplo, pero sólo funciona para navegadores que no son IE (para ello tendrás que usar un hack, como siempre y solo funciona en posiciones de 90º).

ejemplo:
Código HTML:
Ver original
  1. div{
  2. display:block;
  3. position:absolute;
  4. top:60px;
  5. -webkit-transform:rotate(30deg);
  6. -moz-transform:rotate(30deg);      
  7. }
  8.  
  9. <div>Este es un Texto Inclinado 30º</div>

te recomiendo si usas php, usar la libreria gd para la construcción de gráficos, títulos, rótulos, etc...

salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #3 (permalink)  
Antiguo 11/04/2011, 08:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 7 meses
Puntos: 1011
Respuesta: ¿Como voltear textos de una gráfica creada con highchart?

prueba con esto. en el único que no funciona es en opera
Cita:
<html>
<head>
<style>
#vertical1 {writing-mode: tb-rl; filter: flipv fliph}
#vertical2 {writing-mode: tb-rl; filter: flipv fliph}

#vertical1 {-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);}
#vertical2 {-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg);}
</style>
</head>
<body>
<table border="1px" height="110px" width="100px" cellspacing="0" cellspadding="0">
<tr>
<td >
<div id="vertical1">La Fuga - Un Domingo Cualquiera</div>
</td>
<td>
<table border="0" cellspacing="0" cellspadding="0">
<tr><td>Tema1</td></tr>
<tr><td>Tema2</td></tr>
</table>
</td>
<td >
<div id="vertical2">www.munsaka.com</div>
</td>
</tr>
</table>
</body>
</html>
  #4 (permalink)  
Antiguo 12/04/2011, 04:41
 
Fecha de Ingreso: septiembre-2008
Ubicación: Valencia
Mensajes: 160
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: ¿Como voltear textos de una gráfica creada con highchart?

Si eso me funciona Perr0, pero me gira toda la tabla... y solo quiero que me gire el texto del eje X para que se pueda ver todo cuando haya muchos datos como suele pasar, así que me gustaría saber si hay alguna función para implementarla dentro del JavaScript que me lo genera o algo, esta es la parte donde se genera la gráfica:

Código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="highcharts.js"></script>
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
		<script type="text/javascript">	
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'spline'
					},
					title: {
						text: 'Temperatura del <?=$resultado2;?>'
					},
					subtitle: {
						text: 'Temperatura en Cº en La Pobla de Vallbona'
					},
					xAxis: {
						categories:[<?=$h;?>] 
					},
					yAxis: {
						title: {
							text: 'Temperatura Cº'
						},
						labels: {
							formatter: function() {
								return this.value +'°'
							}
						}
					},
					tooltip: {
						crosshairs: true,
						shared: true
					},
					plotOptions: {
						spline: {
							marker: {
								radius: 4,
								lineColor: '#666666',
								lineWidth: 1
							}
						}
					},
					series: [{
						name: 'Sensación Térmica',
						marker: {
							symbol: 'circle'
						},
						data: [<?=$s;?>]
				
					}, {
						name: 'Temperatura',
						marker: {
							symbol: 'square'
						},
						data: [<?=$t;?>]
					}]
				});
				
				
			});
				
		</script>
y esta donde lo muestra:

Código:
<div id="container" style="width: 1050px; height: 500px; margin: 0 auto">
creo que debo poner algo donde esta <?=$h?> que es los valores sacados para los intervalos por una función php, así que eso es una variable php.
__________________
Siempre inmerso en nuevos proyectos.

Cuando estoy activo puedes verme en //LiveCoding
  #5 (permalink)  
Antiguo 13/04/2011, 04:43
 
Fecha de Ingreso: septiembre-2008
Ubicación: Valencia
Mensajes: 160
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: ¿Como voltear textos de una gráfica creada con highchart?

Solucionado solo hay que meter este código dentro de xAxis

Código:
labels : { y : 20, rotation: -60 }
Donde Y es la distancia que separamos del eje y rotation lo que queremos girarlo, en grados.
__________________
Siempre inmerso en nuevos proyectos.

Cuando estoy activo puedes verme en //LiveCoding
  #6 (permalink)  
Antiguo 08/07/2011, 09:50
Avatar de eliza_ralves  
Fecha de Ingreso: junio-2009
Ubicación: Caracas
Mensajes: 126
Antigüedad: 12 años, 6 meses
Puntos: 2
Exclamación Respuesta: ¿Como voltear textos de una gráfica creada con highchart?

Que tal Oracles? Pero te funcionó en IE???? ya que estoy intentando a que aparezca en internet explorer todo el gráfico pero nada... sólo me muestra el gráfico en todos los exploradores menos en IE y necesito que se muestre ahi tambien.


Espero tu pronta respuesta!!
__________________
“El mayor enemigo del conocimiento no es la ignorancia, sino la ilusión del conocimiento”— Stephen Hawking

Etiquetas: textos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:06.