Làm cách nào để đặt giới hạn trên tối thiểu cho trục trong Highcharts?

Question

Tôi đang cố gắng để thiết lập một mức tối thiểu trên ràng buộc, cụ thể:

• Trục Y nên bắt đầu từ 0
• Trục Y nên đến ít nhất 10, hoặc cao hơn (tự động mở rộng)
• Giới hạn trên cho trục Y không bao giờ nên nhỏ hơn 10.

Có vẻ như một cái gì đó Highcharts, nhưng tôi không thể tìm ra cách. Bất kỳ ai có kinh nghiệm với điều này?

Answer 1

Highcharts dường như không có tùy chọn để thực hiện việc này khi tạo biểu đồ. Tuy nhiên, họ vạch trần một vài phương pháp để thẩm vấn các thái cực và thay đổi thái cực, getExtremes() và setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) tìm thấy trong số documentation của chúng.

Vì vậy, một giải pháp khả thi (sau khi tạo biểu đồ):

if (chart.yAxis[0].getExtremes().dataMax < 10) { 
    chart.yAxis[0].setExtremes(0, 10); 
} 

yAxis[0] tài liệu tham khảo là người đầu tiên trục y, và tôi giả định rằng bạn chỉ có một trục trong trường hợp này. doc giải thích cách truy cập các trục khác.

Đây không phải là lý tưởng, bởi vì biểu đồ phải vẽ lại mà không quá đáng chú ý, nhưng nó vẫn còn ở đó. Hy vọng rằng, Highcharts có thể nhận được loại chức năng này được tích hợp sẵn trong các tùy chọn.

Answer 2

HigtCharts có tài liệu thực sự tốt về tất cả các phương pháp có ví dụ.

http://www.highcharts.com/ref/#yAxis--min

Trong trường hợp của bạn tôi nghĩ bạn nên các "min" và tài sản "max" của "yAxis".

phút: Số Giá trị tối thiểu của trục. Nếu null, giá trị min được tính tự động. Nếu tùy chọn startOnTick là true, giá trị min có thể được làm tròn xuống. Mặc định là null.

tối đa: Số Giá trị tối đa của trục. Nếu null, giá trị tối đa được tính tự động. Nếu tùy chọn endOnTick là đúng, giá trị tối đa có thể được làm tròn lên. Giá trị tối đa thực tế cũng bị ảnh hưởng bởi chart.alignTicks. Mặc định là null.

Nếu bạn đang tạo biểu đồ của bạn tự động bạn nên đặt

min = 0 max = 10, nếu tất cả các bạn giá trị dữ liệu ít thì 10

và

chỉ min = 0 , nếu bạn có giá trị lớn hơn thì 10

Chúc may mắn.

Answer 3

Cố gắng thiết lập các giá trị nhỏ nhất của trục và khoảng thời gian của dấu tick ở các đơn vị trục như vậy:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    yAxis: { 
     min: 0, 
     max: 10, 
     tickInterval: 10 
    } 
}); 

Cũng đừng quên để thiết lập giá trị tối đa.

Hy vọng điều đó sẽ hữu ích.

Answer 4

Thêm vào Julian D's very good answer, mục sau tránh được sự cố định vị lại nếu giá trị tối đa được tính của bạn thay đổi theo số chữ số đến giới hạn trên bạn muốn.

Trong trường hợp của tôi, tôi có tỷ lệ phần trăm hiện đang đi vào 20 nhưng tôi muốn có khoảng từ 0 đến ít nhất 100, với khả năng vượt quá 100 nếu được yêu cầu, vì vậy các bộ sau đây tối thiểu & tối đa trong mã nếu dataMax trở thành cao hơn, chỉ định lại tối đa giá trị của nó. Điều này có nghĩa là định vị biểu đồ luôn được tính toán với đủ chỗ cho giá trị 3 chữ số, thay vì được tính cho 2 chữ số sau đó bị hỏng bằng cách ép "100" vào, nhưng cho phép tối đa "999" trước khi có vấn đề tiếp theo.

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       thisSetMax = this.yAxis[0].getExtremes().max; 
       thisDataMax = this.yAxis[0].getExtremes().dataMax; 
       if (thisDataMax > thisSetMax) { 
        this.yAxis[0].setExtremes(0, thisDataMax); 
        alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax); 
       } 
      } 
     }   
    }, 
    title: { 
     text: 'My Graph' 
    }, 
    xAxis: { 
     categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013'] 
    }, 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: '% Due Tasks Done' 
     } 
    } 
    //Etc... 
}); 

Answer 5

Một cách để làm điều này chỉ sử dụng tùy chọn (có sự kiện nào hoặc chức năng) là:

yAxis: { 
    min: 0, 
    minRange: 10, 
    maxPadding: 0 
} 

Đây minRange xác định khoảng thời gian tối thiểu của trục. maxPadding mặc định là 0,01 sẽ làm cho trục dài hơn 10, do đó, chúng tôi đặt nó thành 0 để thay thế.

Điều này mang lại kết quả tương tự như setExtreme sẽ cung cấp. Xem this JSFiddle demonstration.