英文:
Are there any existing examples of such bar/timeline highcharts?
问题
我非常不熟悉Highcharts，事实上这是我在Highcharts上的第一个项目。我正在尝试创建一个用于培训计划的Highchart，并想知道是否有任何现有的时间轴/计划Highchart示例符合我所需的。有很多时间轴Highcharts的示例，但我找不到与我的需求接近的。感谢任何帮助。请查看屏幕截图。谢谢。
英文:
I am very new to highcharts, infact it is my first project on highcharts. I am looking into creating a highchart for a training schedule and wanted to see if there are any existing examples of a timeline/schedule highchart I am looking for. There are so many examples on timeline highcharts but I cannot find anything close to mine. Any help appreciated. Please see screenshot. Thanks.
答案1
得分: 1
以下是翻译好的部分：
"The best way to present data in this way is to use Gantt."
最好的方式来呈现这种数据是使用甘特图。
"On the official Highcharts website you will find demos for various solutions: https://www.highcharts.com/demo/gantt"
在Highcharts官方网站上，您将找到各种解决方案的演示：https://www.highcharts.com/demo/gantt
"Using only the API offered by Highcharts, you can achieve something similar.<br/> Demo: https://jsfiddle.net/BlackLabel/tdv7n3pa/ <br/>"
仅使用Highcharts提供的API，您可以实现类似的效果。演示: https://jsfiddle.net/BlackLabel/tdv7n3pa/
（代码部分不进行翻译）
英文:
The best way to present data in this way is to use Gantt.
On the official Highcharts website you will find demos for various solutions: https://www.highcharts.com/demo/gantt
Using only the API offered by Highcharts, you can achieve something similar.<br/>
Demo: https://jsfiddle.net/BlackLabel/tdv7n3pa/ <br/>
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
(function(H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
var color = item.color;
item.color = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.color = color;
});
}(Highcharts));
Highcharts.ganttChart('container', {
xAxis: [{
tickInterval: 1000 * 3600 * 24 * 30,
labels: {
format: '{value: %b}'
}
},
{
tickInterval: 1000 * 3600 * 24 * 90,
units: [
['month', [3]]
],
labels: {
align: 'center',
formatter: function() {
const label = this,
date = new Date(this.value),
year = date.toLocaleString('en', { year: "2-digit", }),
quarter = Math.floor(date.getMonth() / 3 + 1);
return `FY${year} Q${quarter}`;
}
}
}
],
legend: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
}
}
},
series: [{
name: 'Everyone',
legendColor: '#ffe699',
data: [{
name: 'Annual',
label: 'Training 1',
color: '#ffe699',
start: Date.UTC(2023, 7, 1),
end: Date.UTC(2023, 8, 2)
}, {
name: '2 Years',
label: 'Training 2',
color: '#ffe699',
start: Date.UTC(2023, 6, 9),
end: Date.UTC(2023, 8, 19)
}]
}, {
name: 'Menagers',
legendColor: '#9bc2e6',
data: [{
name: 'Annual',
color: '#9bc2e6',
label: 'Training 1',
start: Date.UTC(2023, 9, 10),
end: Date.UTC(2023, 11, 23)
}]
}]
});
<!-- language: lang-html -->
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论