3-D-Balkendiagramm mit gestaffelter Z-Achse
Treibt die `barchart3d`-Engine-Extension an. `categories` (X-Achsen-Labels) plus eine oder mehrere `series` (jede mit `{label, values[]}`), und der Chart wird vollständig gestylt gerendert — drei flach-shadierte Faces pro Balken (Front-Gradient + helleres Top + dunklere rechte Seite), Tableau-10-Farbpalette, optionales Y/Z-Grid, Legende und gestaffelte Z-Achsen-Labels entlang der Tiefe. Pure JS, keine Rust-Änderungen — nutzt Canvas-Pfade, Linear-Gradienten und Oblique-Projection.
3-D bar chart
JavaScript
// 3-D bar chart with categories, multiple series and a stair-stepped
// Z-axis — drives the `barchart3d` engine extension.
// demo_barchart3d.js
//!NOIMAGE
//!OUTPUT: OUTPUT
//!PARAM: TITLE:string=Umsätze in Bayern
//!PARAM: GLOSSY:bool=true
//!PARAM: WIDTH:integer=800,min=400,max=1600
//!PARAM: HEIGHT:integer=600,min=300,max=1200
//!PARAM: LEGEND:enum(left|top|right|bottom|none)=right
//!PARAM: SERIES_GAP:number=0,min=0,max=0.9,step=0.05
// Three series along Z (years), four categories along X (quarters).
// The data exactly mirrors the classic Excel "3D-Balkendiagramm"
// example so the result is directly comparable to the spreadsheet
// version. Tweak `series` to feed your own data — every series must
// supply exactly one value per category.
const img = Engine.barChart3D({
title: TITLE,
categories: ["Q1", "Q2", "Q3", "Q4"],
series: [
{ label: "2005", values: [20000, 18000, 14000, 22000] },
{ label: "2006", values: [25000, 22000, 21000, 24000] },
{ label: "2007", values: [27000, 28000, 24000, 28000] },
],
yLabel: "EUR",
xLabel: "Quartal",
zLabel: "Jahr",
width: WIDTH,
height: HEIGHT,
glossy: GLOSSY,
legend: LEGEND,
seriesGap: SERIES_GAP,
});
img.save(OUTPUT);
// © 2026 Michael Lechner · mlc OpticScript · https://mlcgo.eu · Elastic License 2.0