Tại sao HighCharts đảo ngược thứ tự chuỗi của tôi?

Question

Tôi đang sử dụng HighCharts để hiển thị biểu đồ thanh ngang tỷ lệ phần trăm chồng lên nhau và nó hoạt động tốt ngoại trừ HighCharts đảo ngược thứ tự dữ liệu chuỗi của tôi theo mặc định.

http://jsfiddle.net/U8nZ6/

Như bạn có thể thấy trong bản demo, mặc dù $ 20k là hàng đầu tiên của mảng data1/data2, đó là đoạn cuối cùng của mỗi thanh (tất cả các cách trên bên phải). Tôi muốn điều này theo thứ tự, vì vậy tôi đã thử một vài điều:

1) Vẽ biểu đồ với mảng .reverse() d. Bạn có thể kích hoạt các dòng trên bản demo ở trên để thấy rằng kết quả của màu đó không phải là màu vì chúng có số lượng bản ghi khác nhau trong mỗi biểu đồ, vì vậy điều này sẽ không hoạt động (và không nên là cách để làm điều này, tôi chắc chắn)

2) Sử dụng xAxis.reversed = true. Điều này đặt nó theo thứ tự đúng với màu sắc phù hợp, nhưng sau đó truyền thuyết được đảo ngược (100% đến 0%) và nó hoạt hình từ phải sang trái.

Có cách nào khác không?

Answer 1

Vâng, giả sử không có thay thế, đây là những gì tôi đã đi với trong trường hợp bất cứ ai tình cờ gặp này thông qua Google:

Sử dụng tùy chọn 2 mô tả ở trên (đảo chiều trục), tôi chỉ đơn giản là sửa đổi nhãn qua các định dạng được nghịch đảo.

Trong trường hợp của tôi, vì nó là tỷ lệ phần trăm (0-100), tôi chỉ cần đặt:

labels: { formatter: function() { return Math.abs(this.value - 100) } }

Answer 2

Tôi đã có một vấn đề tương tự. Sau khi thử các tùy chọn khác nhau, tôi đã thiết lập chỉ mục chuỗi trước khi hiển thị biểu đồ. mã chung:

if (options.chart.type === 'bar') { 

    for (var i = 0; i < options.series.length; i++) { 
     options.series[i].index = options.series.length - 1 - i; 
     options.series[i].legendIndex = i; 
    } 
} 

Cập nhật jsFiddle ví dụ của bạn: http://jsfiddle.net/U8nZ6/23/

Answer 3

Dường như có một tùy chọn gọi là reverseStacks (http://api.highcharts.com/highcharts#yAxis.reversedStacks) mà giá trị mặc định là true đối với bảng xếp hạng xếp chồng lên nhau. Bạn có thể muốn đặt điều này thành false trong mã của mình.

Tôi nhận thấy rằng JSFiddle của bạn yêu cầu cụ thể Highcharts phiên bản 2.3.5, trong đó tùy chọn này có lẽ không có ở đó.

Answer 4

Trong trường hợp bất kỳ ai vẫn đang tìm kiếm điều này. Tôi đã sử dụng được đảo ngược: đúng trong truyền thuyết của mình.

legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false, 
      reversed: true // right here! 
     }