0
날짜 간격이있는 그룹화 된 막대/분산 형 차트를 만드는 방법이 있습니까?그룹화 된 분산 형 또는 막대 형 차트
원하는 결과를 얻으려면 2 가지 방법을 시도했습니다.
1 - 그룹 바 차트 및 trie를 사용하여 간격을 적용합니다 (성공하지 못함). http://jsfiddle.net/W6pgu/
$(function() {
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Basic Info',
},
xAxis: {
categories: [
'Basic Info', ]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
shared: true,
valueSuffix: ' mm'
},
plotOptions: {
bar: {
grouping: false,
shadow: false
}
},
series: [{
name: 'Basic Info 1',
data: [49.9],
pointPadding: 0
}, {
name: 'Basic Info 1',
data: [83.6],
pointPadding: 0.1
}, {
name: 'Basic Info 3',
data: [48.9],
pointPadding: 0.2
}, {
name: 'Basic Info 4',
data: [42.4],
pointPadding: 0.3
}]
});
});
2 - 간트 차트와 유사한 무언가를 재현하는 분산 형 차트를 사용하지만, 나는 그룹이 없습니다. http://jsfiddle.net/r6emu/1814/
var tasks = [{
name: 'Sleep',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 0),
to: Date.UTC(0, 0, 0, 6),
}, {
from: Date.UTC(0, 0, 0, 22),
to: Date.UTC(0, 0, 0, 24),
}]
}, {
name: 'Family time',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 6),
to: Date.UTC(0, 0, 0, 8),
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 22)
}]
}, {
name: 'Eat',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 7),
to: Date.UTC(0, 0, 0, 8),
}, {
from: Date.UTC(0, 0, 0, 12),
to: Date.UTC(0, 0, 0, 12, 30)
}, {
from: Date.UTC(0, 0, 0, 16),
to: Date.UTC(0, 0, 0, 17),
}, {
from: Date.UTC(0, 0, 0, 20, 30),
to: Date.UTC(0, 0, 0, 21)
}]
}, {
name: 'Work',
intervals: [{ // From-To pairs
from: Date.UTC(0, 0, 0, 8),
to: Date.UTC(0, 0, 0, 16)
}]
}];
var series = [];
$.each(tasks.reverse(), function (i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function (j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from)/2, null]);
}
});
series.push(item);
});
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Daily activities'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: false,
startOnTick: false,
endOnTick: false,
},
legend: {
enabled: false
},
tooltip: {
shared: true,
},
plotOptions: {
line: {
lineWidth: 9,
grouping: false,
shadow: false,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
나는이 둘의 혼합이 필요합니다. 어떠한 제안? 대신 바의