Gestapelte Säule
Support-Tickets nach Schweregrad, gestapelt mit Gesamtsummen.
Diagramm ohne Website-Rahmen öffnen ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "bar",
stacked: true,
toolbar: {
show: false
}
},
series: [
{
name: "Low",
data: [34, 28, 12, 24, 35, 4, 26, 39, 28, 25]
},
{
name: "Medium",
data: [23, 18, 13, 20, 8, 12, 6, 24, 15, 8]
},
{
name: "High",
data: [14, 18, 16, 11, 15, 5, 17, 13, 5, 9]
},
{
name: "Critical",
data: [6, 6, 13, 6, 7, 9, 8, 13, 10, 9]
}
],
xaxis: {
categories: ["Sprint 1", "Sprint 2", "Sprint 3", "Sprint 4", "Sprint 5", "Sprint 6", "Sprint 7", "Sprint 8", "Sprint 9", "Sprint 10"]
},
plotOptions: {
bar: {
borderRadius: 3,
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
dataLabels: {
total: {
enabled: true
}
}
}
},
dataLabels: {
enabled: false
},
title: {
text: "Tickets by severity"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "bar",
stacked: true,
toolbar: {
show: false
}
},
series: [
{
name: "Low",
data: [34, 28, 12, 24, 35, 4, 26, 39, 28, 25]
},
{
name: "Medium",
data: [23, 18, 13, 20, 8, 12, 6, 24, 15, 8]
},
{
name: "High",
data: [14, 18, 16, 11, 15, 5, 17, 13, 5, 9]
},
{
name: "Critical",
data: [6, 6, 13, 6, 7, 9, 8, 13, 10, 9]
}
],
xaxis: {
categories: ["Sprint 1", "Sprint 2", "Sprint 3", "Sprint 4", "Sprint 5", "Sprint 6", "Sprint 7", "Sprint 8", "Sprint 9", "Sprint 10"]
},
plotOptions: {
bar: {
borderRadius: 3,
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
dataLabels: {
total: {
enabled: true
}
}
}
},
dataLabels: {
enabled: false
},
title: {
text: "Tickets by severity"
},
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 column-stacked-column.json --out column-stacked-column.svg --with-table Public 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/column/stacked-column/index.md …