我遇到一个问题，即在长时间线的GANTT图表上看不到小日期/范围。此示例JsFiddle有两个日期范围（类别2和类别7），只有几天。但是，时间表大约是5年。客户不希望放大以查看此内容。我可以填充日期，但随后工具提示会显示错误的日期，这可能会影响决策。我花了好几天努力工作，所以任何帮助都会非常感激！
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
var series= [{
data: [ {
name: 'Criteria 1',
x: Date.UTC(2010,5,19),
x2: Date.UTC(2015,5,22),
y:8,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 2',
x: Date.UTC(2015,5,19),
x2: Date.UTC(2015,5,22),
y:7,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 3',
x: Date.UTC(2011,0,19),
x2: Date.UTC(2015,5,22),
y:6,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 4',
x: Date.UTC(2013,6,19),
x2: Date.UTC(2015,5,22),
y:5,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 5',
x: Date.UTC(2010,9,19),
x2: Date.UTC(2015,5,22),
y:4,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 6',
x: Date.UTC(2014,10,19),
x2: Date.UTC(2015,5,22),
y:3,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 7',
x: Date.UTC(2011,2,19),
x2: Date.UTC(2014,3,19),
y:2,
tooltip_data:'Not meeting criteria.',
color:'#ff0000'
} , {
name: 'Criteria 7',
x: Date.UTC(2015,5,19),
x2: Date.UTC(2015,5,22),
y:2,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 8',
x: Date.UTC(2010,5,19),
x2: Date.UTC(2015,5,22),
y:1,
tooltip_data:'',
color:'#000000'
} , {
name: 'Criteria 9',
x: Date.UTC(2010,5,19),
x2: Date.UTC(2015,5,22),
y:0,
tooltip_data:'',
color:'#000000'
}] }]
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Category History',
style: {
color: '#525151',
font: '20px Helvetica',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats:{
month: '%b - %Y'
},
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: true,
tickmarkPlacement: 'on',
tickInterval: 3 * 30 * 24 * 3600 * 1000,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
yAxis: {
min:0,
useHTML: true,
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'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria',
style: {
color: '#525151',
font: '15px Helvetica',
fontWeight: 'bold'
}
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2 )+ '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});
答案 0 :(得分：1)
我不确定这是怎么回事。简而言之，我会在jsFiddle中为甘特图编辑源代码。
就是这样：
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
// added min bar width:
if(barWidth < minWidth) {
barWidth = minWidth;
}
...
安德demo。
现在只需使用barWidth选项即可。此外，您可能需要编辑point.plotX选项。
==========
另一种解决方案是使用不同的x-date，如您所建议的那样。比在工具提示中显示正确的一个，例如点可能如下所示：
{
x: Date.UTC(..),
x2: Date.UTC(..),
y: value,
realStart: Date.UTC(...),
realEnd: Date.UTC(...),
}
realStart好的地方，酒吧的实际开始日期。现在位于tooltip.formatter，您可以访问此值：this.point.options.realStart。