2013-07-29 2 views
5

Мне нужна помощь с осью y полярных диаграмм, таких как паутина или ветровая волна. У меня есть приложение с панелью управления, которое содержит некоторый виджет, каждый из которых содержит iframe с диаграммой Highcharts. Поскольку эти виджеты являются reziable, у меня есть javascript для изменения размера контейнера диаграмм.Неверный отрисовка оси y в полярных диаграммах

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

Некоторые примеры: http://jsfiddle.net/CwnDw/

Моя проблема в том, что масштаб оси у часто выглядят очень некрасиво. Когда диаграмма загружается, ось y имеет только один тик. После изменения размера диаграммы до + 10 px она не содержит тика, а после изменения размера до фактического размера ось y отображает 5 тиков. Я не понимаю, почему. В моем примере я получаю этот эффект только в том случае, когда я изменяю размер диаграммы с небольшого размера до более крупного размера очень быстро.

Есть ли лучший способ изменения размера диаграммы? Я попробовал функцию chart.setSize(), но никакого эффекта. Или: есть ли способ перерегистрации/пересчета оси y?

Спасибо Торбеном

ответ

0

Попробуйте это:

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

Это не имеет никакого эффекта. Я думаю, что есть проблема с окружающим iFrame. Я пытаюсь изменить пример jsFiddle – Torben

1

Я не уверен, что метод перерисовки, что бы выполнить то, что вы ищете, но с моим опытом использования Highcharts, я нашел, что лучше всего указывать позиции тика, чтобы избежать неожиданных результатов.

Вот ссылка на Highchart документации по yAxis: tickPosition

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

Существует довольно хороший пример jsFiddle там должна охватывать реализацию.

Смежные вопросы