Highcharts - Giữ Zero ở giữa trên trục Y với giá trị âm

Question

Tôi có biểu đồ vùng có giá trị âm. Không có gì khác biệt một cách điên rồ từ the example they give, nhưng có một bước ngoặt: Tôi muốn giữ 0 ở giữa trục Y.

Tôi biết điều này có thể đạt được bằng cách thiết lập yAxis.max một số giá trị n và yAxis.min--n, với n đại diện cho các giá trị tuyệt đối của một trong hai đỉnh cao của bảng xếp hạng hoặc máng, nào là lớn hơn (như trong this fiddle). Tuy nhiên, dữ liệu của tôi là động, vì vậy tôi không biết trước thời điểm nào cần phải có n.

Tôi khá mới so với Highcharts, vì vậy có thể tôi đang thiếu một cách để thực hiện việc này thông qua cấu hình và để Highcharts xử lý nó cho tôi, nhưng có vẻ như tôi cần sử dụng Javascript để điều chỉnh theo cách thủ công chính trục y khi trang tải và dữ liệu mới xuất hiện.

Có cách nào dễ dàng, định cấu hình để giữ không ở giữa trên trục Y không?

Answer 1

Tôi đã tìm ra cách để thực hiện điều này thông qua cấu hình sau khi đào sâu hơn nữa vào API Highcharts. Mỗi trục có một tùy chọn cấu hình được gọi là tickPositioner mà bạn cung cấp một hàm trả về một mảng. Mảng này chứa các giá trị chính xác nơi bạn muốn các dấu tick xuất hiện trên trục. Dưới đây là tickPositioner cấu hình mới của tôi, mà đặt lăm ve trên trục Y của tôi, với không gọn gàng ở giữa và tối đa ở cả hai thái cực:

yAxis: { 

    tickPositioner: function() { 

     var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin))); 
     var halfMaxDeviation = Math.ceil(maxDeviation/2); 

     return [-maxDeviation, -halfMaxDeviation, 0, halfMaxDeviation, maxDeviation]; 
    }, 

    ... 
} 

Answer 2

Bạn có thể làm điều này với getExtremes và setExtremes phương pháp

• http://api.highcharts.com/highcharts#Axis.getExtremes%28%29
• http://api.highcharts.com/highcharts#Axis.setExtremes%28%29

dụ:

http://jsfiddle.net/jlbriggs/j3NTM/1/

var ext = chart.yAxis[0].getExtremes(); 

Answer 3

Tôi biết đây là một bài cũ, nhưng nghĩ tôi sẽ gửi của tôi giải pháp nào (được lấy cảm hứng từ một macserv gợi ý ở trên trong câu trả lời được chấp nhận) vì nó có thể giúp những người đang tìm kiếm một giải pháp tương tự:

tickPositioner: function (min, max) { 
      var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin))); 
      return this.getLinearTickPositions(this.tickInterval, -maxDeviation, maxDeviation); 
     } 

Answer 4

Chỉ trong trường hợp ai đó đang tìm kiếm,

một lựa chọn hơn. Tôi đã kết thúc trong một tình huống tương tự. Sau giải pháp của tôi:

tickPositioner: function() { 
    var dataMin, 
    dataMax = this.dataMax; 
    var positivePositions = [], negativePositions = []; 

    if(this.dataMin<0) dataMin = this.dataMin*-1; 
    if(this.dataMax<0) dataMax = this.dataMax*-1; 

    for (var i = 0; i <= (dataMin)+10; i+=10) { 
     negativePositions.push(i*-1) 
    } 

    negativePositions.reverse().pop(); 

    for (var i = 0; i <= (dataMax)+10; i+=10) { 
     positivePositions.push(i) 
    } 

    return negativePositions.concat(positivePositions); 

}, 

http://jsfiddle.net/j3NTM/21/

Answer 5

Đây là giải pháp của tôi. Điều tốt đẹp về điều này là bạn có thể duy trì tickInterval.

tickPositioner(min, max) { 
    let { tickPositions, tickInterval } = this; 
    tickPositions = _.map(tickPositions, (tickPos) => Math.abs(tickPos)); 
    tickPositions = tickPositions.sort((a, b) => (b - a)); 

    const maxTickPosition = _.first(tickPositions); 
    let minTickPosition = maxTickPosition * -1; 

    let newTickPositions = []; 
    while (minTickPosition <= maxTickPosition) { 
     newTickPositions.push(minTickPosition); 
     minTickPosition += tickInterval; 
    } 

    return newTickPositions; 
    }