Aufgaben erstellen, bearbeiten und löschen
Die integrierte Bearbeitung verwendet drag.enabled: Ziehen verschiebt eine Aufgabe, Ziehen an einem Ende ändert ihre Länge. Doppelklick (oder F2) benennt sie direkt um, Delete entfernt sie, Insert / Alt+N fügt eine hinzu, Ctrl+Z / Ctrl+Shift+Z macht Änderungen rückgängig bzw. wiederholt sie. Jede Bearbeitung löst ein abbrechbares Ereignis aus (taskChange / taskCreate / taskDelete) sowie historyChange.
Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.
const options = {
chart: {
height: "auto",
toolbar: {
show: false
},
type: "gantt",
events: {
dataPointSelection: (e, ctx, o) => (sel = o.selected && o.selected[0]),
taskChange: (e, ctx, o) => log(o.source + ': ' + (o.name ? '"' + o.previous.name + '" → "' + o.name + '"' : o.task.name + ' ' + new Date(o.start).toDateString())),
taskCreate: (e, ctx, o) => log(o.source + ': added ' + (o.data.x || o.data.name)),
taskDelete: (e, ctx, o) => log(o.source + ': removed ' + (o.data.x || o.data.name)),
historyChange: (e, ctx, o) => log('history: ' + o.undo + ' undo / ' + o.redo + ' redo')
}
},
series: [
{
name: "Vendor selection",
data: [
{
id: "t1",
x: "Draft brief",
y: [1792360800000, 1792620000000],
progress: 100
},
{
id: "t2",
x: "Collect quotes",
y: [1792533600000, 1793142000000],
progress: 30,
dependsOn: ["t1"]
},
{
id: "t3",
x: "Pick vendor",
y: 1793228400000,
milestone: true,
dependsOn: ["t2"]
}
]
}
],
plotOptions: {
gantt: {
today: {
date: "2026-10-22"
},
drag: {
enabled: true,
draw: true
},
range: {
min: 1792188000000,
max: 1793919600000
}
}
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
WestCoastCharts.use(types).use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
chart: {
height: "auto",
toolbar: {
show: false
},
type: "gantt",
events: {
dataPointSelection: (e, ctx, o) => (sel = o.selected && o.selected[0]),
taskChange: (e, ctx, o) => log(o.source + ': ' + (o.name ? '"' + o.previous.name + '" → "' + o.name + '"' : o.task.name + ' ' + new Date(o.start).toDateString())),
taskCreate: (e, ctx, o) => log(o.source + ': added ' + (o.data.x || o.data.name)),
taskDelete: (e, ctx, o) => log(o.source + ': removed ' + (o.data.x || o.data.name)),
historyChange: (e, ctx, o) => log('history: ' + o.undo + ' undo / ' + o.redo + ' redo')
}
},
series: [
{
name: "Vendor selection",
data: [
{
id: "t1",
x: "Draft brief",
y: [1792360800000, 1792620000000],
progress: 100
},
{
id: "t2",
x: "Collect quotes",
y: [1792533600000, 1793142000000],
progress: 30,
dependsOn: ["t1"]
},
{
id: "t3",
x: "Pick vendor",
y: 1793228400000,
milestone: true,
dependsOn: ["t2"]
}
]
}
],
plotOptions: {
gantt: {
today: {
date: "2026-10-22"
},
drag: {
enabled: true,
draw: true
},
range: {
min: 1792188000000,
max: 1793919600000
}
}
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Warten auf das Diagramm.
Open Data & agent view to read this chart through chart.describe().
Aus der laufenden Bibliothek über das optionale agent/describe -Modul gelesen. Text, Tabelle und JSON zeigen denselben Zustand. Ausschließlich Demonstrationsdaten.
$ wcc chart export gantt-task-crud.json --out gantt-task-crud.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Speichern Sie zuerst eine JSON-Spezifikation und prüfen Sie vor dem Rendern die geladene Runtime und die unterstützten Module. Befehlsreferenz
Loading /gallery/gantt/task-crud/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?