Highcharts 甘特图的任务配置​

需求

甘特图中的条形显示任务的完整持续时间，这些持续时间是根据开始和结束数据点属性计算得出的。

分析与解决

进度条：

使用进度条可以快速了解任务的完成百分比。通过在series.data 点上设置 completed 属性，将常规任务转换为进度条。此属性采用具有选项的对象，用于设置对比度颜色和完成的数量百分比。也可以直接使用 0 到 1 之间的十进制值设置 completed 属性。然后，它设置属性并通过自动选择自然对比色来应用颜色。fillamountamountfill

代码示例：

Highcharts.ganttChart('container', {
 title: {
 text: 'Gantt Chart with Progress Indicators',
 align: 'left'
 },

 xAxis: {
 min: Date.UTC(2014, 10, 17),
 max: Date.UTC(2014, 10, 30)
 },

 accessibility: {
 point: {
 descriptionFormat: '{yCategory}. ' +
 '{#if completed}Task {(multiply completed.amount 100):.1f}% completed. {/if}' +
 'Start {x:%Y-%m-%d}, end {x2:%Y-%m-%d}.'
 }
 },

 lang: {
 accessibility: {
 axis: {
 xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
 }
 }
 },

 series: [{
 name: 'Project 1',
 data: [{
 name: 'Start prototype',
 start: Date.UTC(2014, 10, 18),
 end: Date.UTC(2014, 10, 25),
 completed: {
 amount: 0.25
 }
 }, {
 name: 'Test prototype',
 start: Date.UTC(2014, 10, 27),
 end: Date.UTC(2014, 10, 29)
 }, {
 name: 'Develop',
 start: Date.UTC(2014, 10, 20),
 end: Date.UTC(2014, 10, 25),
 completed: {
 amount: 0.12,
 fill: '#fa0'
 }
 }, {
 name: 'Run acceptance tests',
 start: Date.UTC(2014, 10, 23),
 end: Date.UTC(2014, 10, 26)
 }]
 }]
});

效果图：

希望这些信息对大家有所帮助！如果您有任何其他问题，请随时提问。