2017-02-13 7 views
0

Есть ли способ в highcharts для стека столбцов, которые имеют два значения для каждого столбца. Неполные vs Завершенные проекты Что я хочу иметь, это один столбец для Aaron с неполными и завершенными значениями, затем следующий столбец для команды Johns с неполными и завершенными значениями? Заранее спасибо за помощь Мой код ниже:Stacked Column два значения за столбец

$(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/stack-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] 
}] 

Fiddle:

Выход:

enter image description here