时间表/时间表在高层图 [英] Timeline / Schedule in highcharts
问题描述
我发现 http://jsfiddle.net/VenomXLR/u3eWz/ ,它足够接近,但看不到如何将标签放在酒吧的身体中......例如, p>
data:[{
label:'foo bar',
x:0 ,
low:Date.UTC(2013,07,03,0,0,0),
high:Date.UTC(2013,07,03,4,0,0)
}
您可以启用 dataLabels
并在里面设置 code>
至 true
。演示: http://jsfiddle.net/u3eWz/322/
plotOptions:{
columnrange:{
分组:false,
dataLabels:{
启用:true,
内:true,
格式:'{point.series.name}'
}
}
},
另一个选项可以尝试甘特图。它正在开发中,但对于您的要求应该已经正常工作。
演示: http://jsfiddle.net/o3woh3ye/
var year = 365 * 1000 * 60 * 60 * 24; // CHARTHighcharts.chart('container',{chart:{type:'gantt'},title:{text:'Gantt Chart'}, xAxis:[{type:'datetime',tickInterval:year * 5,labels:{format:'{value:%Y}',style:{fontSize:'15px'}},gridLineWidth:1,maxPadding:0.2}] ,yAxis:[{类别:['总统','副总统','国务卿'],扭转:真,格:真}],系列:[{showInLegend:false,dataLabels:{format:'{point.taskName}'},data:[{start:Date.UTC(1780,0,1),end:Date.UTC(1788,0,1) ,taskGroup:0,taskName:'George Washington'},{start:Date.UTC(1788,0,1),end:Date.UTC(1794,0,1),taskName:'John Adams',taskGroup:0 },{start:Date.UTC(1770,0,1),end:Date.UTC(1780,0,1),taskName:'John Adams',taskGroup:1},{start:Date.UTC(1780, 0,1),end:Date.UTC(1790,0,1),taskName:'Name Name',taskGroup:2}]}]});
< pre class =snippet-code-css lang-css prettyprint-override> #container {max-width:800px; height:400px; margin:1em auto;}
< script src = http://github.highcharts.com/highcharts.js\"></script><script src =http://github.highcharts.com/gantt/modules/gantt.src.js><<<< ; / script>< div id =container>< / div>
Is there a way to do a timeline / schedule in HighCharts that looks similar to this? https://developers.google.com/chart/interactive/docs/gallery/timeline#an-advanced-example.
I found http://jsfiddle.net/VenomXLR/u3eWz/ which is close enough, but cannot see how to put labels in the body of the bar... eg
data: [{ label:'foo bar', x: 0, low: Date.UTC(2013, 07, 03, 0, 0, 0), high: Date.UTC(2013, 07, 03, 4, 0, 0) }
This http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ is also close
You could enable dataLabels
and set inside
to true
for them. Demo: http://jsfiddle.net/u3eWz/322/
plotOptions: {
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
inside: true,
format: '{point.series.name}'
}
}
},
Another option could be to try Gantt chart. It is being developed, but for your requirements should be working fine already.
Demo: http://jsfiddle.net/o3woh3ye/
var year = 365 * 1000 * 60 * 60 * 24;
// THE CHART
Highcharts.chart('container', {
chart: {
type: 'gantt'
},
title: {
text: 'Gantt Chart'
},
xAxis: [{
type: 'datetime',
tickInterval: year * 5,
labels: {
format: '{value:%Y}',
style: {
fontSize: '15px'
}
},
gridLineWidth: 1,
maxPadding: 0.2
}],
yAxis: [{
categories: ['President', 'Vice President', 'Secretary of State'],
reversed: true,
grid: true
}],
series: [{
showInLegend: false,
dataLabels: {
format: '{point.taskName}'
},
data: [{
start: Date.UTC(1780,0,1),
end: Date.UTC(1788,0,1),
taskGroup: 0,
taskName: 'George Washington'
}, {
start: Date.UTC(1788,0,1),
end: Date.UTC(1794,0,1),
taskName: 'John Adams',
taskGroup: 0
}, {
start: Date.UTC(1770,0,1),
end: Date.UTC(1780,0,1),
taskName: 'John Adams',
taskGroup: 1
}, {
start: Date.UTC(1780,0,1),
end: Date.UTC(1790,0,1),
taskName: 'Name Name',
taskGroup: 2
}]
}]
});
#container {
max-width: 800px;
height: 400px;
margin: 1em auto;
}
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/gantt/modules/gantt.src.js"></script>
<div id="container"></div>
这篇关于时间表/时间表在高层图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!