Heim Web-Frontend js-Tutorial So erstellen Sie ein Gantt-Diagramm mit Highcharts

So erstellen Sie ein Gantt-Diagramm mit Highcharts

Dec 17, 2023 pm 07:23 PM
创建 highcharts Gantt-Diagramm

So erstellen Sie ein Gantt-Diagramm mit Highcharts

So verwenden Sie Highcharts zum Erstellen eines Gantt-Diagramms. Es sind spezifische Codebeispiele erforderlich.

Einführung:
Das Gantt-Diagramm ist ein Diagrammformular, das häufig zur Anzeige des Projektfortschritts und des Zeitmanagements verwendet wird und die Startzeit und das Ende visuell anzeigen kann Zeitpunkt der Aufgabe und Fortschritt. Highcharts ist eine leistungsstarke JavaScript-Diagrammbibliothek, die umfangreiche Diagrammtypen und flexible Konfigurationsoptionen bietet. In diesem Artikel wird erläutert, wie Sie mit Highcharts ein Gantt-Diagramm erstellen, und es werden konkrete Codebeispiele gegeben.

1. Einführung in das Highcharts-Gantt-Diagramm:
Das Highcharts-Gantt-Diagramm ist ein Diagrammtyp in der Highcharts-Bibliothek, der den Fortschritt und den Zeitplan des Projekts anzeigt, indem es Daten der Zeitachse zuordnet. Ein Gantt-Diagramm wird durch einen oder mehrere Aufgabenbalken mit der Zeit als Abszisse dargestellt. Die Länge des Aufgabenbalkens stellt die Dauer der Aufgabe dar und die Farbe stellt den Fortschritt der Aufgabe dar.

2. Grundkonfiguration des Highcharts Gantt-Diagramms:

  1. Stellen Sie den X-Achsentyp auf Datum/Uhrzeit ein, was die Zeitleiste darstellt.
  2. Legen Sie die Maximal- und Minimalwerte der Y-Achse fest, um die Höhe der Taskleiste zu bestimmen.
  3. Legen Sie das Datenformat fest, einschließlich Startzeit, Endzeit und Fortschritt der Aufgabe.
  4. Legen Sie den Stil der Taskleiste fest, einschließlich Farbe, Breite usw.
  5. Legen Sie den Titel, Untertitel usw. des Gantt-Diagramms fest.

3. Highcharts Gantt-Diagramm-spezifisches Codebeispiel:

// 创建甘特图的容器
var container = document.getElementById('gantt-container');

// 配置甘特图的基本选项
var options = {
  chart: {
    renderTo: container,
    type: 'gantt'
  },
  title: {
    text: '项目进度甘特图'
  },
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%Y-%m-%d}'
    }
  },
  yAxis: {
    categories: ['任务1', '任务2', '任务3'],
    min: 0,
    max: 2
  },
  series: [{
    name: '任务进度',
    data: [{
      name: '任务1',
      start: Date.UTC(2022, 0, 1),
      end: Date.UTC(2022, 0, 3),
      progress: 0.6
    }, {
      name: '任务2',
      start: Date.UTC(2022, 0, 2),
      end: Date.UTC(2022, 0, 5),
      progress: 0.4
    }, {
      name: '任务3',
      start: Date.UTC(2022, 0, 6),
      end: Date.UTC(2022, 0, 10),
      progress: 0.2
    }]
  }]
};

// 创建甘特图
var chart = new Highcharts.Chart(options);
Nach dem Login kopieren

Der obige Code zeigt, wie man Highcharts verwendet, um ein einfaches Gantt-Diagramm zu erstellen. Darunter definieren wir im Containerelement <div id="gantt-container"></div>用于容纳甘特图,甘特图的基本配置在options对象中进行。在series die Startzeit, Endzeit und den Fortschritt von drei Aufgaben, die als drei Aufgabenleisten auf der Zeitleiste angezeigt werden.

4. Benutzerdefinierte Konfiguration des Gantt-Diagramms von Highcharts:
Zusätzlich zur Grundkonfiguration bietet Highcharts auch viele Anpassungsoptionen, um das Gantt-Diagramm besser an unterschiedliche Anforderungen anzupassen. Hier sind einige gängige Anpassungsoptionen:

  1. Ändern Sie die Farbe der Taskleiste:

    series: [{
      ...
      data: [{
     ...
     color: 'green'
      }]
    }]
    Nach dem Login kopieren
  2. Ändern Sie die Breite der Taskleiste:

    series: [{
      ...
      data: [{
     ...
     width: 10
      }]
    }]
    Nach dem Login kopieren
  3. Fügen Sie einen Link zur Taskleiste hinzu:

    series: [{
      ...
      data: [{
     ...
     link: 'https://example.com'
      }]
    }]
    Nach dem Login kopieren
  4. Benutzerdefiniert. Gantt Diagramm Stil:

    chart: {
      ...
      style: {
     fontFamily: 'Arial',
     fontSize: '14px'
      }
    }
    Nach dem Login kopieren

    Durch Ändern der Konfigurationsoptionen im obigen Code können Sie personalisiertere Gantt-Diagrammeffekte erzielen.

    Fazit:
    In diesem Artikel werden die grundlegenden Schritte und Codebeispiele zum Erstellen eines Gantt-Diagramms mit Highcharts vorgestellt. Durch entsprechende Anpassung der Konfigurationsoptionen können Gantt-Diagramme unterschiedlicher Stile und Anforderungen erstellt werden. Durch die Verwendung von Highcharts können wir ganz einfach leistungsstarke Gantt-Diagramme erstellen, um den Projektfortschritt und die Zeitpläne effektiv anzuzeigen. Ich hoffe, dass dieser Artikel den Lesern helfen kann, das relevante Wissen über das Gantt-Diagramm von Highcharts besser zu verstehen und anzuwenden.

    Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Gantt-Diagramm mit Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erstellen Sie Pixelkunst in GIMP So erstellen Sie Pixelkunst in GIMP Feb 19, 2024 pm 03:24 PM

So erstellen Sie Pixelkunst in GIMP

So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen Dec 17, 2023 pm 06:57 PM

So verwenden Sie dynamische Daten in Highcharts, um Echtzeitdaten anzuzeigen

So erstellen Sie eine Familie mit Gree+ So erstellen Sie eine Familie mit Gree+ Mar 01, 2024 pm 12:40 PM

So erstellen Sie eine Familie mit Gree+

So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen Dec 17, 2023 pm 04:41 PM

So verwenden Sie das Sankey-Diagramm, um Daten in Highcharts anzuzeigen

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts Dec 18, 2023 pm 05:56 PM

So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in Highcharts

So erstellen Sie ein Gantt-Diagramm mit Highcharts So erstellen Sie ein Gantt-Diagramm mit Highcharts Dec 17, 2023 pm 07:23 PM

So erstellen Sie ein Gantt-Diagramm mit Highcharts

So erstellen Sie ein Kontaktposter für Ihr iPhone So erstellen Sie ein Kontaktposter für Ihr iPhone Mar 02, 2024 am 11:30 AM

So erstellen Sie ein Kontaktposter für Ihr iPhone

So erstellen Sie eine Karten-Heatmap mit Highcharts So erstellen Sie eine Karten-Heatmap mit Highcharts Dec 17, 2023 pm 04:06 PM

So erstellen Sie eine Karten-Heatmap mit Highcharts

See all articles