以下のように、要件のためにキャプチャされたデータを表示するために、積み上げ縦棒グラフを作成する必要があります。
従業員がさまざまなプロジェクト (Project1、Project2、Project3) に対して働いた時間を表示します。
ハイチャートを使ってみました。グラフのスクロール機能を有効にしようとすると、従業員の数が増える可能性があるため、ラベル (従業員名) が X 軸に表示されません。
また、スクロールが正しくないようです。
このグラフをスクロール可能にし、従業員名を X 軸のラベルとして表示するのを手伝ってくれる人はいますか?
これまでに作成したチャートを で共有しました。
http://jsfiddle.net/sri421/Yyq5N/1/
コードは次のとおりです $(function() { $('#container').highcharts('StockChart', {
chart: {
type: 'column',
inverted:true
},
title: {
text: 'Total Hours worked Vs Different Projects'
},
xAxis: {
categories: ['user1', 'user2', 'user3', 'user4', 'user5','user6', 'user7', 'user8', 'user9', 'user10','user11', 'user12', 'user13', 'user14', 'user15','user16', 'user17', 'user18', 'user19', 'user20'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Hours Worked'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: false
},
series: [{
name: 'Project1',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2 ,5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}, {
name: 'Project2',
data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}, {
name: 'Projecct3',
data: [3, 4, 4, 2, 5,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}]
});
}); ありがとう、スリ