gpt4 book ai didi

javascript - Highcharts 中的时间线/时间表

转载 作者:太空宇宙 更新时间:2023-11-04 16:08:07 26 4
gpt4 key购买 nike

有没有办法在 HighCharts 中制作与此类似的时间线/时间表? https://developers.google.com/chart/interactive/docs/gallery/timeline#an-advanced-example .

我找到了http://jsfiddle.net/VenomXLR/u3eWz/它足够接近,但看不到如何将标签放在栏的主体中......例如

      data: [{
label:'foo bar',
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}

这个http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/也很接近

最佳答案

您可以启用dataLabels并设置inside对他们来说为true。演示:http://jsfiddle.net/u3eWz/322/

plotOptions: {
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
inside: true,
format: '{point.series.name}'
}
}
},

另一个选择可能是尝试 Gantt chart 。它正在开发中,但根据您的要求应该已经可以正常工作了。

演示: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>

关于javascript - Highcharts 中的时间线/时间表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41717285/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com