有没有办法制作带有日期间隔的分组条形图/散点图？
我尝试了 2 种不同的方法来达到预期的效果。
1 - 使用分组条形图并尝试应用间隔（没有成功）。 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
});
我需要两者的混合。有什么建议吗？