2016-03-18 12 views
0

Web sayfasında iki svg dosyası yan yana yerleştirmeye çalışıyorum. Bu yaygaralar oluşturmak için susy kullanarak yaptım, birincisi 2 sütun genişliğinde, ikinci 10 sütun. İlk aralıkta dar bir çubuk grafik ve ikinci yayılma alanında geniş bir çizgi grafik yerleştiriyorum.Ölçekli web sayfası olarak pus sfg sgg svg grafikleri

Yaşadığım sorun grafiklerin ölçeklendirilmesidir. enter image description here

Ama onları daha böyle bakmak istiyorum: onlar şuna benzer enter image description here

Onlar pygal ile oluşturulan svg dosyalardır ve ben pygal bir boyut zorlayarak ikinci görüntüyü elde, ama değil Ekran boyutu değişiklikleri zarif ve başarısız olur.

svg çubuk grafiğini, genişliğini ölçeklemeden yüksekliği nasıl ölçeklendirebilirim ve piliçte boyutu manuel olarak değiştirmek yerine bir web tarayıcısında dinamik olarak nasıl yapabilirim? Ayrıca, svg dosyalarını başka bir sistem aracılığıyla oluşturulduğu ve sık sık güncelleştirildiği için elle düzenleyemiyorum.

cevap

0

Grafikleriniz iki farklı div olarak yüklenmelidir; böylece, görünüm tabanlı bir css sınıfına (Twitter Bootstrap'teki col tabanlı sınıflar gibi) bağlı olarak her biri için farklı bir width stili ayarlayabilirsiniz. Dinamik svg'leri yüklerseniz (Pygal'da explicit_size ayarı olmadan) farklı pencere boyutlarını kullanabilmeniz gerekir.