Angular 在海图中制作时间线

我希望使用当前的稳定版本在Highcharts中创建一个时间表。我知道甘特图正在开发中，但它已经在Alpha中使用了很长一段时间，我正在考虑使用一些稳定的东西。有一个相关的问题，但小提琴在这个问题上已经不起作用了。此外，我将其集成到Angular 4项目中，使用它本身已经很长时间没有维护了

我想创建如下内容，但如果可以在当前构建中使用Highcharts或Highstocks来创建，我就不知所措了

小提琴代码：

var today = new Date(),
    day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART
Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Timeline'
    },
    xAxis: {
            type: 'datetime',
        min: today - 10 * day,
        max: today
    },

    /*
    plotOptions: {
        gantt: {
            pathfinder: {
                type: 'simpleConnect'
            }
        }
    },
    */

    series: [{
        name: 'State 1',
        data: [{
            taskName: 'System 1',
            start: today - 10 * day,
            end: today - 7 * day
        }, {
            taskName: 'System 2',
            start: today - 6 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 3',
            start: today - 7 * day,
            end: today - 2 * day
        },{
            taskName: 'System 1',
            start: today - 3 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 2',
        data: [{
            taskName: 'System 1',
            start: today - 7 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 2',
            start: today - 10 * day,
            end: today - 6 * day
        }, {
            taskName: 'System 3',
            start: today - 2 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 3',
        data: [{
            taskName: 'System 2',
            start: today - 3 * day,
            end: today - 0 * day
        }, {
            taskName: 'System 3',
            start: today - 10 * day,
            end: today - 7 * day
        }]
    }]
});

查看海图。我修改了数据系列，使之像时间线一样

Highcharts.chart('container', {
  chart: {
    type: 'xrange'
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  plotOptions: {
    series: {
      dataLabels: {
        align: 'center',
        enabled: true,
        format: "{point.name}"
      }
    }
  },
  tooltip: {
    formatter: function() {
    console.log(this)
      return this.point.name+' is in <b>'+this.yCategory+'</b><br>  from <b>' + Highcharts.dateFormat('%e %b %Y',
          new Date(this.x)) +
        ' to '+ Highcharts.dateFormat('%e %b %Y',
                                          new Date(this.x2))+'</b> ';
    }
  },
  series: [{
    name: 'Project 1',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 0,
      name: 'Proto1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 0,
      name: 'Proto2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 0,
      name: 'Proto3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 10, 25),
      y: 1,
      name: 'Dev1'
    }, {
      x: Date.UTC(2014, 10, 25),
      x2: Date.UTC(2014, 11, 5),
      y: 1,
      name: 'Dev2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 1,
       name: 'Dev3'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 1),
      y: 2,
      name: 'Test1'
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 5),
      y: 2,
      name: 'Test2'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 10),
      y: 2,
      name: 'Test3'
    }, ],
    dataLabels: {
      enabled: true
    }
  }]

});

---

我以前试过x-range。问题是，我希望“州”有不同的颜色。我在中尝试使用x-range，但有两个问题，一个类别以交错的方式出现，尽管图例显示不同的颜色，但没有反映在一个类别中。请参阅我随附的甘特图了解差异。您可以使用

分组：false，

检查此Aaah！这就解决了问题。但另一件事仍然存在。更具体地说，我希望“Proto1”、“Dev2”、“Test3”具有相同的颜色。我可以在悬停在图例上过滤它们，但颜色不同。检查更新的小提琴真棒！不知道css控件。只有一件事。为什么要更改脚本位置？

.highcharts-series-0 .highcharts-point {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}

.highcharts-series-1 .highcharts-point {
  fill: #434348;
  stroke: #434348;
}

.highcharts-series-2 .highcharts-point {
  fill: #90ed7d;
  stroke: #90ed7d;
}