nhãn cột highcharts

Question

Tôi đã tạo biểu đồ Highcharts với các cột được nhóm và xếp chồng lên nhau, như trong ví dụ được tìm thấy tại đây: http://www.highcharts.com/demo/column-stacked-and-grouped. Ví dụ cho thấy một số loại trái cây cho 5 người khác nhau, được nhóm theo giới tính. Những gì tôi bỏ lỡ trong ví dụ này, là một nhãn x trục hiển thị tên của nhóm (nam hoặc nữ) bên dưới mỗi nhóm. Có thể thêm điều này vào biểu đồ không?

Đây là phiên bản đơn giản của biểu đồ tôi đang cố gắng thực hiện: http://jsfiddle.net/WQjVP/66/. Nó cho thấy số lượng các vấn đề mở (xanh lam) và quá hạn (đỏ) cho ba địa điểm trong một hệ thống xử lý hồ sơ. Cột bên trái trong mỗi nhóm hiển thị số cho vị trí đó cho tháng 7 và cột bên phải trong mỗi nhóm hiển thị số cho tháng 8 cho cùng một đơn vị. Những gì tôi muốn làm là hiển thị tháng dưới mỗi cột, để cột đầu tiên sẽ có "Tháng Bảy", cột thứ hai sẽ có "Tháng tám", cột thứ ba sẽ có "Tháng Bảy" và cứ như vậy, giữa cột và cột nhãn vị trí.

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    title: { 
     text: '' 
    }, 
    subtitle: { 
     text: '' 
    }, 
    xAxis: { 
     categories: ["Location A","Location B","Location C"], 
     title: { 
      text: "Location" 
     } 
    }, 
    yAxis: { 
     allowDecimals: false 

    }, 
    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        if (this.y === 0) { 
         return null; 
        } 
        return this.y; 
       }, 
       style: { 
        color: 'white' 
       } 
      } 
     }, 
     column: { 
      stacking: 'normal', 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     "color": "rgb(0,0,255)", 
     "name": "open", 
     "data": [18, 2, 6], 
     "stack": "Jul"}, 
    { 
     "color": "rgb(255,0,0)", 
     "name": "overdue", 
     "data": [0, 0, 0], 
     "stack": "Jul"}, 
    { 
     "color": "rgb(0, 0, 255)", 
     "name": "open", 
     "data": [20, 1, 10], 
     "stack": "Aug"}, 
    { 
     "color": "rgb(255, 0, 0)", 
     "name": "overdue", 
     "data": [2, 1, 2], 
     "stack": "Aug"}] 
}); 

Answer 1

Hãy thử sử dụng stackedLabels.

yAxis: { 
    stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: 'gray' 
     }, 
     formatter: function() { 
      return this.stack; 
     } 
    } 
} 

Demo

reference