Yığın alan grafiği oluşturmak için nasıl giderim? [jQuery, Google Grafikler, vb]

Grafik yapmam gereken bazı verilerim var. Sorun, verilerin fiyat aralığına sahip olmasıdır. Bu fiyatlardan bazıları aralarında bir miktar örtüşüyor. Ayrıca, tüm fiyat aralıkları sıfır değeri olmayan üst ve alt sınırlara sahiptir. Benim ihtiyaçlarına uygun bir jQuery Grafik veya Google Chart bulmaya çalışıyorlar enter image description here Yığın alan grafiği oluşturmak için nasıl giderim? [jQuery, Google Grafikler, vb]

ancak şimdiye kadar mümkün olmuştur: Burada

tür ben başarmak arıyorum ne olduğunu açıklamak bir görüntü böyle yaparak. Aradığım şeylere yakın olan bazı şeyler var, örneğin kademeli grafikler, ancak hepsinin "örtüşen değerler yok" veya "sıfırdan başlıyor" gibi gereksinimleri vardır. Ayrıca bir mum grafiğini kullanmayı düşünüyordum, ancak veri kümem için önemli olan çakışan alanları gerçekten ayırt edemiyorsunuz.

Bu uygun bir özellik midir? Sadece yanlış yerlere mi bakıyorum? Yardımınız için şimdiden teşekkür ederiz.

kaynak

2012-06-11 Jim P

Son birkaç saatin nasıl yapıldığını anlamaya çalıştığım hava durumu verilerini görselleştirmekle benzer bir şey yapmak istediğiniz gibi görünüyor.

Google Grafikler ile ne yapmak istediğinizi gerçekten bildiğimi söyleyemem, ancak http://dygraphs.com/ adresindeki kitaplık gerçekten cazip görünüyor. web sitesinden

Stacked line graph.

kaynak

2012-06-24 22:11:07 aendrew

Ben grafikler bu tip oldukça expierence var. Karmaşık bir örnek için bkz. my site. Basitleştirilmiş bir çözüm böyle kodlanabilir:

<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>

Ne yukarıdaki kodda yapmak serinin sayısını çoğaltmak olduğunu. Her seri, bir önceki seriye olan uzaklığın yüksekliği olan bir saydam seri tabakadan önce gelecektir.

basitleştirilmiş çözeltinin bir ekran görüntüsü: A screenshot of the simplified solution (code shown above)

kompleks çözeltinin bir ekran görüntüsü: A screenshot of the complex solution implemented on my site allepeilingen.com

kaynak

2012-10-29 12:00:29 Ruut

Yığın alan grafiği oluşturmak için nasıl giderim? [jQuery, Google Grafikler, vb]

cevap

İlgili konular