¿Cómo podría hacer un tipo de gráfico de área apilada? [jQuery, Google Charts, etc.]

Tengo algunos datos para los que necesito hacer una tabla. El problema es que los datos tienen rangos de precios. Algunos de estos precios tienen cierta superposición entre ellos. Además, todos los rangos de precios tienen límites superiores e inferiores que no son un valor cero.¿Cómo podría hacer un tipo de gráfico de área apilada? [jQuery, Google Charts, etc.]

Aquí está una imagen de tipo de explicar qué es lo que estoy buscando para llevar a cabo: enter image description here

He estado tratando de encontrar una Tabla de jQuery o de gráficos de Google que se adapte a mis necesidades, pero hasta ahora han sido incapaces para hacerlo Hay algunas cosas que están cerca de lo que estoy buscando, por ejemplo gráficos escalonados, pero todos tienen requisitos como "sin valores superpuestos" o "comienza en cero". Estaba pensando en utilizar un gráfico de velas también, pero no se puede diferenciar realmente las áreas superpuestas, que son importantes para mi conjunto de datos.

¿Esto es algo que está disponible? ¿Acabo de buscar en los lugares equivocados? Gracias de antemano por su ayuda.

Fuente

2012-06-11 Jim P

Parece que quiere hacer algo similar a visualizar los datos de la serie meteorológica, que es lo que he estado tratando de descubrir sobre cómo hacer las últimas horas.

No puedo decir que realmente sé cómo hacer lo que se quiere con Google Charts, pero la biblioteca en http://dygraphs.com/ se ve muy elegante.

Desde el sitio web:

Stacked line graph.

Fuente

2012-06-24 22:11:07 aendrew

que tienen algún expierence con este tipo de gráficos. Vea para un ejemplo complejo my site. Una solución simplificada se puede codificar de la siguiente manera:

<html> 
    <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Fill data object, first row contains legend text, which in 
     // this example contains the calculation rules. 
     var data = google.visualization.arrayToDataTable([ 
      ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
      'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
      'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'], 
      ['2004/05', 1, 2, 2, 2, 5,4], 
      ['2005/06', 2, 3, 1, 1, 3,3], 
      ['2006/07', 3, 4, 0, 2, 0,2], 
      ['2007/08', 3, 4, -1, 2, -5,2], 
      ['2008/09', 4, 4, -2, 3, -9,1] 
     ]); 

     // Create and draw the visualization. 
     var ac = new google.visualization.AreaChart(
     document.getElementById('visualization')); 
     ac.draw(data, { 
      isStacked: true, 
      chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
      series: { 
      0:{color: 'transparent'}, 
      2:{color: 'transparent'}, 
      4:{color: 'transparent'}, 
      } 
     }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html>

Lo que hacemos en el código anterior es duplicar el número de series. Cada serie irá precedida de una capa de serie transparente que tiene la altura de la distancia a la serie anterior.

Una captura de pantalla de la solución simplificada: A screenshot of the simplified solution (code shown above)

Una captura de pantalla de la solución de complejo: A screenshot of the complex solution implemented on my site allepeilingen.com

Fuente

2012-10-29 12:00:29 Ruut

¿Cómo podría hacer un tipo de gráfico de área apilada? [jQuery, Google Charts, etc.]

Respuesta

Cuestiones relacionadas