Primefaces biểu đồ + jqplot mở rộng - giá trị làm tròn ở trục y

Question

nền

Tôi có một biểu đồ đường thẳng primefaces (ngày x, số nguyên> = 0 vào y) mở rộng với các tùy chọn 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; 
    } 

tôi đang sử dụng extender jqplot có khoảng ngày tùy chỉnh trên trục x và điều này đang làm việc tốt:

Vấn đề

Khi tôi sử dụng tùy chọn min: 0 ở trục y định dạng của số đi thực sự sôi nổi, đặc biệt là khi có giá trị nhỏ:

Lưu ý rằng minY thuộc tính trong primefaces không hoạt động (có thể do bộ mở rộng ghi đè lên)

Để khắc phục điều đó, tôi sử dụng formatString: %d. Nó hoạt động nhưng nó tạo ra vấn đề với số tick:

Như bạn thấy trên ảnh chụp màn hình, có một số lần so với dòng cho giá trị 1.

Câu hỏi

Làm thế nào có thể chắc chắn rằng tôi không nhận được nhiều lần giá trị giống nhau trên trục y? Tôi không thể thực sự có số lượng bọ ve tĩnh vì khi dữ liệu lớn lên (giả sử khoảng 100), tôi muốn một vài giá trị trên trục y (ví dụ: 20, 40, v.v ...)

Answer 1

Tôi đã giải quyết được vấn đề của mình bằng cách sử dụng ý tưởng từ bài đăng của Mehasse.

Xác định giá trị max như đề xuất của Mehasse không xóa các dòng đánh dấu không mong muốn nhưng đã giúp tôi tìm câu trả lời.

Theo mặc định, dấu phẩy/jqplot muốn có 4 đường đánh dấu trục y. Do đó, nếu giá trị tối đa dưới 4, sẽ có sự trùng lặp trong nhãn trục y khi chúng được làm tròn lên (formatString: '%d').

Những gì tôi về cơ bản muốn, là khoảng thời gian đánh dấu là một trong hai Max(y) \ 4 khi Max(y) > 4, hoặc 1 khác:

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; 
    } 

Để tính giá trị y-max, tôi nhận được giá trị cốt truyện sử dụng this.cfg.data đó là có dạng [series_1,..., series_n] với series_i = [[x_1, y_1],..., [x_m, y_m]]

chức năng maxSeries trông giống như:

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; 
} 

Lưu ý rằng trong trường hợp của tôi, tôi biết trường hợp của mình, tôi không có giá trị dưới đây 0. Mã này nên được cập nhật nếu đây không phải là trường hợp.

Answer 2

Tôi đã rất ngạc nhiên khi lần đầu tiên tôi bắt đầu sử dụng JQPlot rằng nó không chọn nhãn trục hợp lý ra khỏi hộp. Nó thực sự dễ dàng để sửa chữa.

Tôi sẽ giả định rằng bạn muốn trục y của bạn bắt đầu ở số không. Nếu điều đó không đúng, bạn sẽ cần sửa đổi mã này một chút.

// 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 
    } 
) 

Ý tưởng cơ bản ở đây là chúng tôi muốn làm tròn lên một số đẹp giá trị, vòng gần giá trị lớn nhất trong loạt bài của chúng tôi. Cụ thể, chúng tôi làm tròn lên số gần nhất có số 0 ở tất cả các chữ số ngoại trừ số nhiều nhất bên trái. Vì vậy, tối đa 882 sẽ dẫn đến tối đa trục y là 1000.