问题：
如何使用highcharts库使用甘特图绘制里程碑线？
计阳泽
带有高图的GANTT图表示例：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/xrange-series/
我试着用这样一个里程碑的例子。
我的代码目前看起来像这样：
$(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));
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: '',
categories: ['Prototyping', 'Development', 'Testing'],
min: 0,
max: 2
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 2),
y: 0
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
}]
});
});
编辑：我希望它看起来像什么样的模型示例：
http://imgur.com/hjLZxBt
我希望从Sharepoint上的列表中提取行，在甘特图上显示银行假日和冻结期
共有3个答案
仉宸
如果您添加第二个轴和系列（带有里程碑的数据），您应该能够做到。
下面是一个在柱状图顶部有一条线的示例
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
祁默
感谢joshwa一个伟大的回答。
如果有2个项目，那么3个部分（“原型设计”、“开发”、“测试”）中的每一个都会有2个栏，一个在另一个上面进行比较。
$(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));
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000, // one day,
},
yAxis: {
title: '',
categories: ['Prototyping', 'Development', 'Testing'],
min: 0,
max: 2
},
series: [{
name: 'Project 1',
borderRadius: 5,
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 2),
y: 0
},{
x: Date.UTC(2014, 11, 3),
x2: Date.UTC(2014, 11, 9),
y: 0
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
},{
name: 'Project 2',
borderRadius: 5,
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 2),
y: 0
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 13),
x2: Date.UTC(2014, 11, 18),
y: 2
}]
}]
});
});
颛孙成益
如果您想指定银行假日或周末，我建议使用plotBands。要标记特定的里程碑，您可以使用plotLines。以下是将两者应用于图表的示例。
http://jsfiddle.net/u8zvpaum/
$(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));
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
xAxis: {
type: 'datetime',
/* START plotBands AND plotLines EDITS */
pointInterval: 24 * 3600 * 1000, // one day,
plotLines: [{ // mark milestone date with vertical line
color: '#F45B5B',
width: '2',
value: Date.UTC(2014, 11, 6),
label: {
useHTML: true,
text: '<span style="color:#F45B5B"">Dec 6, 2014</span>'
}
}],
plotBands: [{ // visualize the weekend or other range of dates
from: Date.UTC(2014, 11, 2),
to: Date.UTC(2014, 11, 5),
color: 'rgba(68, 170, 213, .2)'
}]
/* END plotBands AND plotLines EDITS */
},
yAxis: {
title: '',
categories: ['Prototyping', 'Development', 'Testing'],
min: 0,
max: 2
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 2),
y: 0
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
}]
});
});
类似资料：
-
我想创建交互式甘特图（或序列图），用于显示多个处理器上的任务调度。 我找到了这个库，它产生了非常好的交互式甘特图。不幸的是，ploly-Gantt只适用于日期而不是数值，就像我对计划的运行时值所做的那样。 有没有可能用数值绘制甘特图？ 代码示例：（我想使用这样的东西）
-
我想画一些垂直线来跟踪任务，如下图中的红线所示。我相信可以使用甘特图绘制器绘制线条。 我想要的是在绘制任务期间存储直线endpoint的坐标，然后最终在绘图中绘制这些直线。 我想知道是否有一种方法可以让你在绘图上绘制任何东西，以及这是否是解决这个问题的正确方法。 以下是我的甘特图渲染器代码： 更新： 似乎LineAnnotics是实现这些行的最佳方式。Link1
-
问题内容： matplotlib如何用该数据绘制图形。问题在于可视化从第2列到第3列的距离。最后，它看起来应该像甘特图。 我需要为列1提供2种颜色。对于y轴，选择列0，对于x轴，请选择列2和3。对于每一行，应绘制一条线。第2列是开始时间，第3列是停止时间。 问题答案： 如果我对您的理解正确，则希望在第3列和第4列的x值之间绘制一条水平线，而y值等于在第0列中的水平线。要在给定的y值上绘制一条水平线
-
有人知道如何在甘特图中的特定位置移动/绘制虚线吗？例如，我有这样的图表： 链接到图像 很难看到任务1和任务2以及任务3在哪里。 如果可能的话，画水平线不是在1,2,3线，而是在整个系列之后，以明确视觉分隔符。 谢谢
-
问题内容： 我必须使用pdfbox绘制一个饼图。 令数据为： 主题分数百分比累计分数 Sub-1 80 80 80 Sub-2 70 70150 Sub-3 65 65215 Sub-4 90 90305 Sub-5 55 55360 令半径和中心为100像素和（250，400）。 让我们取平行于x轴的初始线。 绘图的初始线条语句将为： contentStream.drawLine（250，400
-
我必须用pdfbox绘制一个饼图。 让数据是： 设半径和中心为100像素和（250,400）。 让我们取平行于x轴的初始线 绘制初始行语句将为： contentStream。抽绳（250400350400）； 我坚持： a）在距离初始线一定程度的圆圈上找到点的x， y坐标，以绘制半径 b）使用贝塞尔曲线在两点之间绘制圆弧。 任何帮助解决问题将不胜感激！