堆積組高圖中的柱狀圖示例

-1

我將使用高圖來準備堆積柱狀圖報告。問題是我的數據類型是不同的。堆積組高圖中的柱狀圖示例

Please, view image example

你能幫助我建立像圖像的圖表。請

來源

2017-09-01 osantander

我張貼的答案，它應該爲你工作。如果它適合你，那麼接受它。 – TechnoCrat

看看這個演示：http://jsfiddle.net/gup3mund/。希望能幫助到你。 –

d_Paul，你的演示對我有用，謝謝你的幫助。真的你是一個很大的幫助 – osantander

您可以通過正確處理數據部分，使用Highchart中的堆疊組來實現此目的。

在這裏，我試圖建立你所需要的相同的圖表。您可以處理圖例和其他圖表。

這應該對你有所幫助。我還創建了小提琴演示，您可以使用下面的鏈接訪問。

小提琴演示：http://jsfiddle.net/t4u8b8co/1/

Highcharts.chart('container', { 
 

 
    chart: { 
 
    type: 'column' 
 
    }, 
 

 
    title: { 
 
    text: '' 
 
    }, 
 
    
 
    legend: { 
 
    enabled: false 
 
    }, 
 

 
    xAxis: { 
 
    categories: [ 
 
     ['19603', '19666'], '19603', '19603' 
 
    ] 
 
    }, 
 

 
    yAxis: { 
 
    title: { 
 
     text: 'Good or Bad' 
 
    } 
 
    }, 
 

 
    plotOptions: { 
 
    column: { 
 
     stacking: 'percent' 
 
    } 
 
    }, 
 

 
    series: [{ 
 
    name: 'Jane', 
 
    data: [244, 23, 4], 
 
    stack: '19603' 
 
    }, { 
 
    name: 'John', 
 
    data: [306, 522, 546], 
 
    stack: '19603' 
 
    }, { 
 
    name: 'Jane', 
 
    data: [376], 
 
    stack: 'female' 
 
    }, { 
 
    name: 'Janet', 
 
    data: [174], 
 
    stack: 'female' 
 
    }] 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

來源

2017-09-04 07:09:59 TechnoCrat

非常感謝你TechnoCrat，你的演示給我工作。 – osantander

@osantander如果它適合你，然後接受並投票表決它。 – TechnoCrat

堆積組高圖中的柱狀圖示例

回答

相關問題