2013-03-06 2 views
7

фонаPrimefaces диаграмма + jqplot расширитель - закругленное значение оси у

У меня есть primefaces диаграмма линии (дата х, целое число> = 0 на у) расширенная с вариантами jqplot:

function extender() { 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d' 
       } 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

Я использую jqplot расширитель иметь собственный интервал дат на оси х, и это работает отлично:

Working fine

Проблема

Когда я использую вариант min: 0 в оси у форматирование чисел идет действительно обалденный, особенно, когда есть небольшие значения:

Fraction number

Обратите внимание, что атрибут minY в primefaces не работает (возможно, потому, что расширитель перезаписывает его)

Чтобы исправить это, я использую formatString: %d. Это работает, но это создает проблемы с количеством тиков:

enter image description here

Как вы видите на скриншоте, есть несколько раз линии для значения 1.

Вопрос

Как можно убедиться, что я не получаю несколько раз то же значение по оси y?

У меня не может быть статического количества тиков, потому что когда данные растут большими (скажем, около 100), мне нужны несколько значений по оси y (например, 20, 40 и т. Д.)

ответ

5

Мне удалось решить мою проблему, используя идеи из сообщения Мехассе.

Определение значения max, как это было предложено Мехассе, не удаляло нежелательные линии, но помогло мне найти ответ.

По умолчанию, primefaces/jqplot хочет иметь 4 линии по оси y. Таким образом, если максимальное значение находится ниже 4, при их округлении (formatString: '%d') будет дублирование по метке оси y.

То, что я в принципе хочу, интервал клеща быть либо Max(y) \ 4 когда Max(y) > 4 или 1 иначе:

function actionPlanExtender() { 
     var series_max =maxSeries(this.cfg.data); 
     var numberOfTicks =4; 
     var tickInterval = Math.max(1, Math.ceil(series_max/numberOfTicks)); 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d', 
       }, 
       tickInterval: tickInterval 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

Для вычисления у-макс значения, я получаю значение участка с помощью this.cfg.data который форм [series_1,..., series_n] с series_i = [[x_1, y_1],..., [x_m, y_m]]

maxSeries функции выглядит следующим образом:

function maxSeries(datas) { 
    var maxY = null; 
    var dataLength = datas.length; 
    for (var dataIdx = 0; dataIdx < dataLength; dataIdx++) { 
     var data = datas[dataIdx]; 
     var l = data.length; 
     for (var pointIdx = 0; pointIdx < l; pointIdx++) { 
      var point = data[pointIdx]; 
      var y = point[1]; 
      if (maxY == null || maxY < y) { 
       maxY = y; 
      } 
     } 
    } 
    return maxY; 
} 

Обратите внимание, что в моем случае я знаю свое дело. У меня нет значения ниже 0. Этот код должен быть обновлен, если это не так.

2

Я был удивлен, когда впервые начал использовать JQPlot, чтобы он не выбрал разумные метки осей из коробки. Это на самом деле легко исправить.

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

// This is YOUR data set 
var series = [882, 38, 66, 522, 123, 400, 777]; 

// Instead of letting JQPlot pick the scale on the y-axis, let's figure out our own. 
var series_max = Math.max.apply(null, series); 
var digits = max.toString().length; 
var scale = Math.pow(10, max_digits - 1); 

var max = (Math.ceil(series_max/scale)) * scale; 

$.jqplot(
    'foo', 
    [series], 
    { 
     axes: { 
      yaxis: { 
       min: 0, 
       max: max 
      } 
     } 
     // Put your other config stuff here 
    } 
) 

Основная идея здесь заключается в том, что мы хотим, чтобы закруглить до какого-то хорошего, вокруг значения вблизи максимального значения в нашей серии. В частности, мы округляем до ближайшего числа, которое имеет нули во всех цифрах, кроме самого левого. Таким образом, максимум 882 приведет к максимальному значению оси y 1000.

+0

Спасибо за это! Это не решило мою проблему, но она дала хорошую идею о том, как ее решить. Я отправлю ответ, чтобы объяснить, как я это сделал – phoenix7360

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