Перерисовка jqPlot - PullRequest
Новая
       4

Перерисовка jqPlot

4 голосов
/ 15 марта 2012

Я работаю с jqPlot, и мне было интересно, есть ли способ изменить его размер / перерисовать, когда кто-то изменит размер окна.Я знаю, что есть функция перерисовки, но я не уверен, как на самом деле вызвать ее ... Может кто-нибудь дать мне несколько советов, как это сделать?

Вот мой код: 

$.jqplot('chart1', [line1], {
              title:'Users Per Day',
              axes:{
                xaxis:{
                  renderer:$.jqplot.DateAxisRenderer,
                  tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
               //   tickInterval:'1 week',
                  tickOptions:{
                    formatString:'%b %#d, %y',
                    angle:-30
                  } 
                },
                yaxis:{
                  tickOptions:{
                    formatString:'%.1f'
                    }
                }
              },
              highlighter: {
                show: true,
                sizeAdjust: 7.5
              },
              cursor: {
                  show: false
                  /*show: true,
                  zoom: true,
                  showTooltip: false */
              }
          });

'line1' - это массив, который заполняется непосредственно перед этим кодом, а chart1 - это div, где строится диаграмма.

Есть идеи?

Спасибо,

Крейг

Ответы [ 3 ]

8 голосов
/ 12 апреля 2012

Эта страница на графиках изменяемого размера полезна: http://www.jqplot.com/deploy/dist/examples/resizablePlot.html

Вот как я решил вашу конкретную проблему для проекта, над которым я работаю (я просто буду использовать ваш код в качестве примера):

Сначала присвойте свой график переменной: 

plot = $.jqplot('chart1', [line1], {
          title:'Users Per Day',
          axes:{
            xaxis:{
              renderer:$.jqplot.DateAxisRenderer,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
           //   tickInterval:'1 week',
              tickOptions:{
                formatString:'%b %#d, %y',
                angle:-30
              } 
            },
            yaxis:{
              tickOptions:{
                formatString:'%.1f'
                }
            }
          },
          highlighter: {
            show: true,
            sizeAdjust: 7.5
          },
          cursor: {
              show: false
              /*show: true,
              zoom: true,
              showTooltip: false */
          }
      });

Затем на вашей странице добавьте эту функцию: 

$(window).resize(function() {
        plot.replot( {resetAxes: true } );
    });

С помощью resetAxes он также будет масштабировать оси(хотя вы теряете любые минимальные / максимальные значения, которые вы могли установить).См. Эту страницу для получения дополнительной информации о реплоте: http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot.

2 голосов
/ 24 июня 2015

Я использовал 

    var timer;
    $(window).resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            plot.replot({});
        }, 100);
    });

, поэтому он не продолжает повторять интервалы для каждого пикселя, а скорее в конце изменения размера.

0 голосов
/ 24 марта 2012

Обычно диаграмма jqplot занимает всю область, которую содержит идентификатор div диаграммы. Поэтому постарайтесь найти способ изменить размер div и перерисовать диаграмму, вызвав перерисовку объекта графика.

...