Hey there! Let's work through how you can build that timeline-style chart using stable Highcharts versions—since you want to avoid the alpha Gantt module and are working with Angular 4 and the older angular2-highcharts library.

Key Background: Stable Alternative to Gantt #

The alpha Gantt module isn't your only option! Highcharts' xrange series is fully stable and can replicate the timeline view you want. This series is part of Highcharts core (with a separate module to load) or included by default in Highstock, so it’s perfect for your use case.

Adjusted Code for Stable Highcharts #

Here’s how to refactor your original code to use the xrange series instead of the alpha Gantt method. This will work with current stable Highcharts/Highstock versions:

// Set up base date values
var today = new Date();
today.setUTCHours(0, 0, 0, 0); // Normalize to midnight UTC
var dayMs = 1000 * 60 * 60 * 24; // Milliseconds in a day

// Initialize the chart with xrange series
Highcharts.chart('container', {
    title: { text: 'Stable Timeline Chart' },
    xAxis: {
        type: 'datetime',
        min: today.getTime() - 10 * dayMs,
        max: today.getTime()
    },
    yAxis: {
        type: 'category',
        categories: ['System 1', 'System 2', 'System 3'],
        reversed: true // Optional: Places System 1 at the top of the chart
    },
    series: [{
        name: 'State 1',
        type: 'xrange',
        data: [
            { x: today.getTime() - 10 * dayMs, x2: today.getTime() - 7 * dayMs, y: 0 },
            { x: today.getTime() - 6 * dayMs, x2: today.getTime() - 3 * dayMs, y: 1 },
            { x: today.getTime() - 7 * dayMs, x2: today.getTime() - 2 * dayMs, y: 2 },
            { x: today.getTime() - 3 * dayMs, x2: today.getTime(), y: 0 }
        ],
        color: '#7cb5ec' // Custom color for state distinction
    }, {
        name: 'State 2',
        type: 'xrange',
        data: [
            { x: today.getTime() - 7 * dayMs, x2: today.getTime() - 3 * dayMs, y: 0 },
            { x: today.getTime() - 10 * dayMs, x2: today.getTime() - 6 * dayMs, y: 1 },
            { x: today.getTime() - 2 * dayMs, x2: today.getTime(), y: 2 }
        ],
        color: '#90ed7d'
    }, {
        name: 'State 3',
        type: 'xrange',
        data: [
            { x: today.getTime() - 3 * dayMs, x2: today.getTime(), y: 1 },
            { x: today.getTime() - 10 * dayMs, x2: today.getTime() - 7 * dayMs, y: 2 }
        ],
        color: '#f7a35c'
    }]
});

Integrating with Angular 4 & angular2-highcharts #

Since you’re using the older angular2-highcharts library, follow these steps to get it working:

1. Load the xrange module in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'angular2-highcharts';
import * as Highcharts from 'highcharts';
import highchartsXrange from 'highcharts/modules/xrange';

// Initialize the xrange module with Highcharts
highchartsXrange(Highcharts);

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, HighchartsChartModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Define chart options in your component:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    title: { text: 'Angular 4 Timeline Chart' },
    xAxis: {
      type: 'datetime',
      min: new Date().setUTCHours(0,0,0,0) - 10 * 1000 * 60 * 60 * 24,
      max: new Date().setUTCHours(0,0,0,0)
    },
    yAxis: {
      type: 'category',
      categories: ['System 1', 'System 2', 'System 3'],
      reversed: true
    },
    series: [
      {
        name: 'State 1',
        type: 'xrange',
        data: [
          { x: new Date().setUTCHours(0,0,0,0) - 10 * 1000 * 60 * 60 *24, x2: new Date().setUTCHours(0,0,0,0) -7 * 1000 * 60 * 60 *24, y:0 },
          { x: new Date().setUTCHours(0,0,0,0) -6 * 1000 * 60 * 60 *24, x2: new Date().setUTCHours(0,0,0,0) -3 * 1000 * 60 * 60 *24, y:1 },
          { x: new Date().setUTCHours(0,0,0,0) -7 * 1000 * 60 * 60 *24, x2: new Date().setUTCHours(0,0,0,0) -2 * 1000 * 60 * 60 *24, y:2 },
          { x: new Date().setUTCHours(0,0,0,0) -3 * 1000 * 60 * 60 *24, x2: new Date().setUTCHours(0,0,0,0), y:0 }
        ],
        color: '#7cb5ec'
      },
      // Add State 2 and State 3 series here, matching the structure above
    ]
  };
}

3. Add the chart to your template:

<highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

Important Notes #

• Version Compatibility: Since angular2-highcharts is unmaintained, stick to Highcharts versions 6.x or 7.x (these are stable and compatible with Angular 4).
• Customization: You can tweak colors, tooltips, and axis labels just like any other Highcharts chart to match your desired look.

内容的提问来源于stack exchange，提问作者Sayak Mukhopadhyay