我想在 Gant Diagram Highcharts 的每个框中添加一个标签，但我做不到。如何在每一帧中显示一些值？
标签必须出现在每个框的中央。我动态生成的所有数据
下面我留下了我所提出的例子。
如果你能帮助我，非常感谢...
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
chart: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, '#FAFAFA'],
[1, '#FAFAFA']
]
},
style: {
fontFamily: '\'Unica One\', sans-serif'
}
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var today = new Date('2018-02-02');
var day = 1000 * 60 * 60 * 24;
var map = Highcharts.map;
var dateFormat = Highcharts.dateFormat;
var series;
var cars;
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
function formatear(dato) {
var fecha = new Date(dato);
fecha.setUTCHours(0);
fecha.setUTCMinutes(0);
fecha.setUTCSeconds(0);
fecha.setUTCMilliseconds(0);
fecha = fecha.getTime();
return fecha;
}
var js = [{
assigns: '39982-Constanza',
current: 0,
pendings: 0,
finalized: 35,
asigned: 35,
deals: [{
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-20') - 1 * day,
to: formatear('2018-02-20') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-21') - 1 * day,
to: formatear('2018-02-21') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-23') - 1 * day,
to: formatear('2018-02-23') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, {
assigns: '52270-Jhon',
current: 0,
pendings: 0,
finalized: 76,
asigned: 76,
deals: [{
pending: '15',
from: formatear('2018-02-07') - 1 * day,
to: formatear('2018-02-07') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-21') - 1 * day,
to: formatear('2018-02-21') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, {
assigns: '54243-Jane',
current: 0,
pendings: 0,
finalized: 39,
asigned: 39,
deals: [{
pending: '15',
from: formatear('2018-02-06') - 1 * day,
to: formatear('2018-02-06') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-09') - 1 * day,
to: formatear('2018-02-09') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-13') - 1 * day,
to: formatear('2018-02-13') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, ]
}, {
assigns: '55011-Juan',
current: 0,
pendings: 0,
finalized: 66,
asigned: 66,
deals: [{
pending: '15',
from: formatear('2018-02-05') - 1 * day,
to: formatear('2018-02-05') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-06') - 1 * day,
to: formatear('2018-02-06') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-07') - 1 * day,
to: formatear('2018-02-07') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-09') - 1 * day,
to: formatear('2018-02-09') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-11') - 1 * day,
to: formatear('2018-02-11') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-14') - 1 * day,
to: formatear('2018-02-14') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, ];
grafica(js);
function grafica(script) {
//console.log(script);
var json = script;
series = json.map(function(item, i) {
var data = item.deals.map(function(deal) {
return {
id: 'deal-' + i,
pending: deal.pending,
start: deal.from,
end: deal.to,
assign: deal.assign,
y: i
};
});
return {
name: item.assigns,
data: data,
current: item.deals[item.current],
pendings: item.pendings,
finalized: item.finalized,
asigned: item.asigned
};
});
Highcharts.ganttChart('container', {
series: series,
title: {
text: 'Resume'
},
tooltip: {
pointFormat: '<span>Pendings: {point.pending}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
xAxis: {
currentDateIndicator: true
},
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Person'
},
categories: map(series, function(s) {
return s.name;
})
}, {
title: {
text: 'Assigns'
},
categories: map(series, function(s) {
return s.asigned;
})
}, {
title: {
text: 'Ends'
},
categories: map(series, function(s) {
return s.finalized;
})
}, {
title: {
text: 'From'
},
categories: map(series, function(s) {
return dateFormat('%e. %b', s.current.from);
})
}, {
title: {
text: 'To'
},
categories: map(series, function(s) {
return dateFormat('%e. %b', s.current.to);
})
},
{
title: {
text: 'Pendings'
},
categories: map(series, function(s) {
return s.pendings;
})
}
]
}
}
});
}#container {
max-width: 1200px;
min-width: 800px;
height: 400px;
margin: 1em auto;
}
.scrolling-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div class="scrolling-container">
<div id="container"></div>
</div>最佳答案
您可以通过启用 dataLabels 并使用 dataLabels.formatter 或 dataLabels.format 来设置要显示的内容来实现它。
代码:
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
chart: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, '#FAFAFA'],
[1, '#FAFAFA']
]
},
style: {
fontFamily: '\'Unica One\', sans-serif'
}
}
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var today = new Date('2018-02-02');
var day = 1000 * 60 * 60 * 24;
var map = Highcharts.map;
var dateFormat = Highcharts.dateFormat;
var series;
var cars;
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
function formatear(dato) {
var fecha = new Date(dato);
fecha.setUTCHours(0);
fecha.setUTCMinutes(0);
fecha.setUTCSeconds(0);
fecha.setUTCMilliseconds(0);
fecha = fecha.getTime();
return fecha;
}
var js = [{
assigns: '39982-Constanza',
current: 0,
pendings: 0,
finalized: 35,
asigned: 35,
deals: [{
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-20') - 1 * day,
to: formatear('2018-02-20') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-21') - 1 * day,
to: formatear('2018-02-21') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-23') - 1 * day,
to: formatear('2018-02-23') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, {
assigns: '52270-Jhon',
current: 0,
pendings: 0,
finalized: 76,
asigned: 76,
deals: [{
pending: '15',
from: formatear('2018-02-07') - 1 * day,
to: formatear('2018-02-07') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-21') - 1 * day,
to: formatear('2018-02-21') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, {
assigns: '54243-Jane',
current: 0,
pendings: 0,
finalized: 39,
asigned: 39,
deals: [{
pending: '15',
from: formatear('2018-02-06') - 1 * day,
to: formatear('2018-02-06') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-09') - 1 * day,
to: formatear('2018-02-09') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-13') - 1 * day,
to: formatear('2018-02-13') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-19') - 1 * day,
to: formatear('2018-02-19') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, ]
}, {
assigns: '55011-Juan',
current: 0,
pendings: 0,
finalized: 66,
asigned: 66,
deals: [{
pending: '15',
from: formatear('2018-02-05') - 1 * day,
to: formatear('2018-02-05') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-06') - 1 * day,
to: formatear('2018-02-06') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-07') - 1 * day,
to: formatear('2018-02-07') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-09') - 1 * day,
to: formatear('2018-02-09') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-11') - 1 * day,
to: formatear('2018-02-11') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-14') - 1 * day,
to: formatear('2018-02-14') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-16') - 1 * day,
to: formatear('2018-02-16') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-22') - 1 * day,
to: formatear('2018-02-22') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-26') - 1 * day,
to: formatear('2018-02-26') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-27') - 1 * day,
to: formatear('2018-02-27') + 0 * day,
assign: 1
}, {
pending: '15',
from: formatear('2018-02-28') - 1 * day,
to: formatear('2018-02-28') + 0 * day,
assign: 1
}, ]
}, ];
grafica(js);
function grafica(script) {
//console.log(script);
var json = script;
series = json.map(function(item, i) {
var data = item.deals.map(function(deal) {
return {
id: 'deal-' + i,
pending: deal.pending,
start: deal.from,
end: deal.to,
assign: deal.assign,
y: i
};
});
return {
name: item.assigns,
data: data,
current: item.deals[item.current],
pendings: item.pendings,
finalized: item.finalized,
asigned: item.asigned
};
});
Highcharts.ganttChart('container', {
series: series,
plotOptions: {
gantt: {
dataLabels: {
enabled: true,
formatter: function() {
console.log(this);
return this.y;
}
}
}
},
title: {
text: 'Resume'
},
tooltip: {
pointFormat: '<span>Pendings: {point.pending}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
xAxis: {
currentDateIndicator: true
},
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Person'
},
categories: map(series, function(s) {
return s.name;
})
}, {
title: {
text: 'Assigns'
},
categories: map(series, function(s) {
return s.asigned;
})
}, {
title: {
text: 'Ends'
},
categories: map(series, function(s) {
return s.finalized;
})
}, {
title: {
text: 'From'
},
categories: map(series, function(s) {
return dateFormat('%e. %b', s.current.from);
})
}, {
title: {
text: 'To'
},
categories: map(series, function(s) {
return dateFormat('%e. %b', s.current.to);
})
},
{
title: {
text: 'Pendings'
},
categories: map(series, function(s) {
return s.pendings;
})
}
]
}
}
});
}#container {
max-width: 1200px;
min-width: 800px;
height: 400px;
margin: 1em auto;
}
.scrolling-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div class="scrolling-container">
<div id="container"></div>
</div>演示:
关于javascript - 在正方形 Highcharts Gant 中添加标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55033404/