2013-07-29 8 views
5

Potrzebuję pomocy z osią y wykresów biegunowych, takich jak pajęczyna lub wiatrówka. Mam aplikację z pulpitem nawigacyjnym, który zawiera widget, z których każdy zawiera element iframe z wykresem Highcharts. Ponieważ te widgety są realne, mam trochę javascriptu do zmiany rozmiaru kontenera wykresów.Niewłaściwe renderowanie osi Y na wykresach polarnych

$(window).bind("resize", resizeChart); 
    function resizeChart() { 
     var width = $(document).width() - 55; 
     var height = $(document).height() - 60; 
     $("#container").css("width", width); 
     $("#container").css("height", height); 
    } 

Kilka przykładów: http://jsfiddle.net/CwnDw/

Moim problemem jest to, że skala osi y często wyglądają bardzo brzydko. Kiedy wykres ładuje oś y ma tylko jeden znacznik. Po zmianie rozmiaru wykresu na + 10 px, nie zawiera żadnego haczyka, a po zmianie rozmiaru na wielkość początkową oś y renderuje 5 znacznikami. Nie rozumiem, dlaczego. W moim przykładzie uzyskuję ten efekt tylko wtedy, gdy bardzo szybko zmieniam rozmiar wykresu z małego na większy na większy.

Czy istnieje lepszy sposób na zmianę rozmiaru wykresu? Próbowałem funkcji chart.setSize(), ale bez efektu. Lub: czy istnieje sposób na ponowne wyliczenie/przeliczenie osi Y?

Dziękuję Torben

Odpowiedz

0

Spróbuj tego:

function resizeChart() { 
    var width = $(document).width() - 55; 
    var height = $(document).height() - 60; 
    $("#container").css("width", width); 
    $("#container").css("height", height); 
    setTimeout(function() { 
     chart1.setSize(
      width, 
      height, 
      false 
     ); 
    },10); 
} 

http://jsfiddle.net/9YFB8/2/

+0

To nie ma żadnego efektu. Chyba jest problem z otaczającym iFrame. Próbuję edytować mój przykład jsFiddle – Torben

1

nie jestem pewien sposób przerysowywania że osiągnąć to, czego szukasz, ale z mojego doświadczenia z użyciem Highcharts, stwierdziłem, że najlepiej jest określić pozycje kleszcza, aby uniknąć nieoczekiwanych rezultatów.

Tu jest link do dokumentacji Highchart dotyczące yAxis: tickPosition

http://api.highcharts.com/highcharts#yAxis.tickPositions

Jest to całkiem dobry jsFiddle przykład tam, że powinny obejmować wdrożenie.