2017-02-13 8 views
0

列ごとに2つの値を持つ列をスタックする方法はありますか?不完全な対完成プロジェクト私が持っていたいのは、不完全で完成した値を持つAaronの列と、不​​完全で完成した値を持つJohnsチームの次の列です。あなたの助けを事前に感謝は 私のコードは以下の通りです:スタックされた列列あたり2つの値

$(function() { 
 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'column' 
 
    }, 
 
    title: { 
 
     text: 'Complete vs Incomplete Tasks (by Team)' 
 
    }, 
 
    xAxis: { 
 
     categories: ['Aarons Team' /*,'Johns Team' */ ] 
 
    }, 
 
    yAxis: { 
 
     min: 0, 
 
     title: { 
 
     text: 'Tasks' 
 
     } 
 
    }, 
 
    legend: { 
 
     reversed: true 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
     stacking: 'normal' 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'Aarons Team', 
 
     data: [4] 
 
     }, //incomplete projects 
 
     { 
 
     name: 'Aarons Team', 
 
     data: [2] 
 
     } // completed projects 
 
     /* {name: 'Johns Team', data:[6]},    //incompleted projects 
 
     {name: 'Johns Team', data:[4]}    // completed projects 
 
     */ 
 

 
    ] 
 

 
    }); 
 
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>

+0

次回は[mcve]を作成するには、エディタの '<>'をクリックしてください – mplungjan

+0

この[リンク]を参照してください(http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/ tree/master/samples/highcharts/demo/column-stacked /)それはあなたを助けるでしょう – khushi

答えて

0

私はそれを考え出しました。 余分な列ごとに、前の列に0またはNULLを設定する必要があります。

 { name: 'Aarons Team', data:[4] }, //incomplete projects 
     { name: 'Aarons Team', data:[2]} // completed projects 
     {name: 'Johns Team', data:[0,6]},    //incompleted projects 
     {name: 'Johns Team', data:[0,4]}    // completed projects 
0

私があなたの質問を正しく理解していれば、何が求められているのかは、積み上げ縦棒グラフの基本的な機能です。

あなたはこのようにそれを設定することができます。

xAxis: { 
    categories: ['Aaron','John'] 
}, 
series: [{ 
    name: 'Complete', 
    data: [5,7] 
}, { 
    name: 'Incomplete', 
    data: [8,9] 
}] 

フィドル:

出力:

enter image description here

関連する問題