Highcharts甘特图 - 需要允许没有数据的类别 [英] Highcharts GANTT chart - need to allow category with no data
本文介绍了Highcharts甘特图 - 需要允许没有数据的类别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在这个JSFiddle示例中创建一个GANTT图表$ http：// jsfiddle .net / 2xkfm87e / 11 / ]（我已经使用下面的jlbriggs的输入将这个小提琴更新为工作版本，它还包括我需要的其他选项 - 每个时间间隔上的tooltip。）
但是，即使一个或多个类别没有任何关联数据，我也需要显示所有类别。最终用户需要意识到没有与该类别相关的数据。在我的JSFiddle示例中，我能想到的最好的方法就是使用最初的日期，并创建一个通知用户该类别没有数据的点。我宁愿它是空的。
任何帮助都将不胜感激！
$（function（）{
//定义任务
var tasks = [{
名称：'Category 1'，
间隔：[{// From-To将
与Date.UTC（2010,5,21），
对：Date.UTC（2015 ，5,21），
标签：'类别1'
}]
}，{
名称：'类别2-应该为空'，
间隔： [{//源自 - 将
与：Date.UTC（2010,5,21），
配对：Date.UTC（2010,5,21），
label：'Category 2-应该为空'
}]
}，{
名称：'类别3'，
间隔：[{//从 - 到
从： Date.UTC（2011,05,16），
至：Date.UTC（2012,03,21），
标签：'Category 3'
}，{
from ：Date.UTC（2013,07,09），
到： Date.UTC（2015,05,22），
标签：'类别3'
}]
}，{
名称：'类别4'，
间隔：[{//源自 - 将
与Date.UTC（2013,07,18），
配对：Date.UTC（2015,05,22），
标签：'类别4'
}]
}，{
name：'Category 5'，
intervals：[{// From-To pairs
from：Date.UTC （2013,06,17），
至：Date.UTC（2014,04,21），
标签：'5类'
}，{
自：日期。 UTC（2015,01,22），
至：Date.UTC（2015,05,22），
标签：'Category 5'
}]
}，{
名称：'6类'，
间隔：[{//从 - 到
从：Date.UTC（2013,06,17），
到：Date.UTC （2014,04,21），
标签：'Category 6'
}，{
来自：Date.UTC（2015,01,22），
至：Date.UTC（2015,05,22），
标签：'Category 6'
}]
}，{
name：'Category 7'，
intervals：[{// From-To pairs
from from ：Date.UTC（2013,06,17），
至：Date.UTC（2014,04,21），
标签：'类别7'
}，{
从：Date.UTC（2015,01,22），
到：Date.UTC（2015,05,22），
标签：'类别7'
}]
}，{
name：'Category 8'，
intervals：[{// From-To pairs
from：Date.UTC（2013,06,17），
to ：Date.UTC（2014,04,21），
标签：'Category 8'
}，{
来自：Date.UTC（2015,01,22），
到：Date.UT C（2015,05,22），
标签：'类别8'
}]
}，{
名称：'类别9'，
间隔：[ {// From-To将
与Date.UTC（2013,06,17），
对：Date.UTC（2014,04,21），
标签：'类别9 '
}，{
来自：Date.UTC（2015,01,22），
至：Date.UTC（2015,05,22），
标签：'Category 9'
}]
}];
//定义里程碑
/ * var里程碑= [{
名称：'上床睡觉'，
时间：Date.UTC（0，0，0 ，22），
任务：1，
标记：{
符号：'triangle'，
lineWidth：1，
lineColor：'black'，
半径：8
}
}];
* /
//将任务重新排列为linevar series = [];
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）;
}）;
//重构里程碑
/*$.each(milestones，function（i，milestone）{
var item = Highcharts.extend（里程碑，{
数据：[[
milestone.time，
milestone.task
]]，
类型：'scatter'
}）;
series.push（ item）;
}）;
* /
//创建图表
var chart = new Highcharts.Chart（{
图表：{
renderTo：'container'
$，
标题：{
文本：'类别历史记录'
}，
xAxis：{
类型：'datetime '
}，
yAxis：{
类别：['类别9'，
'类别8'，
'类别7 '，
'类别6'，
'类别5'，
'类别4'，
'类别3'，
'类别2'，
'类别1']，
tickInterval：1，
tickPixelInterval：200，
标签：{
style：{
color：'＃525151'，
font：'12px Helvetica'，
fontWeight：'bold'
}，
/ * formatter：function（）{
if（tasks [this.value]）{
return tasks [this.value] .name;
$
startOnTick false b $ b endOnTick false b $ b title
text'Criteria'
}，
minPadding：0.2，
maxPadding：0.2，
fontSize：'15px'
}，
legend ：{
enabled：false
}，
tooltip：{
formatter：function（）{
return'< b> + tasks [this.y] .name +'< / b>< br />'+
Highcharts.dateFormat（'％m-％d-％Y'，this.point.options.from）+
' - '+ Highcharts.dateFormat（'％m-％d-％Y'，this.point.options.to）;
}
}，
plotOptions：{
line：{
lineWidth：10，
marker：{
enabled： false
}，
dataLabels：{
enabled：true，
align：'left'，
formatter：function（）{
return this.point .options&& this.point.options.label;
}
}
}
}，
系列：系列
}）;
}）;
解决方案
Highcharts默认行为将显示类别，即使存在没有数据，除非它是第一个或最后一个类别。
您可以将输入数组更改为空<
如果您需要第一个或最后一个类别为空，您需要在Y轴上设置最小值和最大值：
>
I am trying to build a GANTT chart as in this JSFiddle example [ http://jsfiddle.net/2xkfm87e/11/ ] (I have now updated this fiddle to the working version using jlbriggs' input below. It also includes some other options I needed -i.e. tooltip on each interval.)
However, I need to display all the categories even if one or more do not have any associated data. The end user needs to be aware that there is no data associated with that category. In my JSFiddle example, the best I could come up with is just use the initial dates and create a point that informs the user that there is no data for that category. I would rather it be null.
Any help with this would be greatly appreciated!
$(function () {
// Define tasks
var tasks = [{
name: 'Category 1',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2015, 5, 21),
label: 'Category 1'
}]
}, {
name: 'Category 2- Should be null',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2010, 5, 21),
label: 'Category 2- Should be null'
}]
}, {
name: 'Category 3',
intervals: [{ // From-To pairs
from: Date.UTC(2011,05,16),
to: Date.UTC(2012,03,21 ),
label: 'Category 3'
}, {
from: Date.UTC(2013,07,09),
to: Date.UTC(2015,05,22),
label: 'Category 3'
}]
}, {
name: 'Category 4',
intervals: [{ // From-To pairs
from: Date.UTC(2013,07,18 ),
to: Date.UTC(2015,05,22),
label: 'Category 4'
}]
}, {
name: 'Category 5',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 5'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 5'
}]
}, {
name: 'Category 6',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 6'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 6'
}]
}, {
name: 'Category 7',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 7'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 7'
}]
}, {
name: 'Category 8',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 8'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 8'
}]
}, {
name: 'Category 9',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 9'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 9'
}]
}];
// Define milestones
/*var milestones = [{
name: 'Get to bed',
time: Date.UTC(0, 0, 0, 22),
task: 1,
marker: {
symbol: 'triangle',
lineWidth: 1,
lineColor: 'black',
radius: 8
}
}];
*/
// re-structure the tasks into line seriesvar series = [];
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
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// restructure the milestones
/*$.each(milestones, function(i, milestone) {
var item = Highcharts.extend(milestone, {
data: [[
milestone.time,
milestone.task
]],
type: 'scatter'
});
series.push(item);
});
*/
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Category History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
});
解决方案
Highcharts default behavior will show the category even if there is no data, unless it is the first or last category.
You can just change your input array to have an empty intervals array in your case:
If you need the first or last category to be empty, you'll need to set the min and max on the Y axis:
这篇关于Highcharts甘特图 - 需要允许没有数据的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
