Highcharts分組堆棧x.axis名稱+類別名稱

我想讓我的highcharts圖看起來像這樣或類似。Highcharts分組堆棧x.axis名稱+類別名稱

我曾嘗試使用類電郵宣傳的插件highcharts，但它似乎降下來，不是與堆棧選項很好地工作。

樣品中的jsfiddle：http://jsfiddle.net/02ey1hbr/7/

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     labels: { 
        rotation: -0, 
        style: { 
         fontSize: '10px', 
         align: 'Right', 
        } 

       }, 
     categories: [{ 
       name: "Case A", 
       categories: ["Male", "Female"] 
      }, { 
       name: "Case B", 
       categories: ["Male", "Female"] 
      }] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'x-axis' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
    bar: { 
     stacking: 'normal' 
    } 
    }, 

    series: [{ 
     name: 'x', 
     data: [5,3,4,5], 
       stack: 'StackA' 
    }, { 
     name: 'y', 
     data: [3,5,4,5], 
     stack: 'StackA' 
     },{ 
     name: 'x', 
     data: [5,3,4,5], 
       stack: 'StackB' 
    }, { 
     name: 'y', 
     data: [3,5,4,5], 
     stack: 'StackB' 
     } 
    ] 
});

來源

2017-07-24 Alex D

在我的項目，使用堆棧可以讓我在被分成2個12個的數據集在一系列得到較好的控制棧。 jsfiddle中的示例是一個較小的版本，用於驗證概念驗證並更好地與社區進行交互。堆棧也使代碼更容易維護。

使用：Proper x-axis for Highcharts stack group column作爲參考，我能夠將我的示例修改爲：http://jsfiddle.net/02ey1hbr/11/，並實現了堆棧的工作示例。它不完美，但非常接近。

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: [{ 
      categories: ["Case A", "Case B","Case C", "Case D"], 
      labels: { 
      rotation: -90, 
      x: -60, 
      style: { 
       fontSize: '10px', 
       align: 'Right', 
      } 
      }, 
      tickWidth: 1, 
      tickLength: 60, 
    }, 
    { 
     categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'], 
     opposite: false, 
     labels: { 
      rotation: 0, 
      x: 60, 
      style: { 
      fontSize: '10px', 
      align: 'Right', 
      } 
     }, 
     tickWidth: 0, 
    }], 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'x-axis' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
    bar: { 
     stacking: 'normal' 
    } 
    }, 
    series: [{ 
     name: 'x', 
     data: [1,8,9,16], 
       stack: 'StackA' 
    }, { 
     name: 'y', 
     data: [1,7,10,15], 
     stack: 'StackA' 
     },{ 
     name: 'x', 
     data: [3,6,11,14], 
       stack: 'StackB' 
    }, { 
     name: 'y', 
     data: [4,5,12,13], 
     stack: 'StackB' 
     }, 
     { 
      name: '', 
      data: [0,0,0,0,0,0,0,0], 
      showInLegend: false, 
      stack: 'StackB', 
      xAxis: 1    
     } 
    ] 
});

來源

2017-07-26 01:08:25