Verknüpfungsmodi: none / category / angle / map
Dasselbe Diagramm mit den verschiedenen Verknüpfungsmodi. none: unabhängige Ringe. category: Segmente verknüpfen gleich benannte Monate. angle: Monate innerhalb des jeweiligen Winkelbereichs. map: explizite Zuordnung, hier ein Geschäftsjahr ab April (Q1 → Apr–Jun).
Verknüpfte Ebenen
Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"type": "radialColumn",
"height": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
42,
38,
51,
47,
55,
61,
58,
66,
72,
69,
78,
84
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"link": {
"mode": "map",
"map": (s) => (s.depth === 0 ? range(0, 3).map((k) => (+s.name.slice(1) * 3 + k) % 12) : [(months.indexOf(s.name) + 3) % 12]),
"unit": "months"
},
"fill": {
"type": "value",
"stops": [
"#3b82f6",
"#8b5cf6",
"#d946ef"
]
},
"layers": [
{
"type": "sunburst",
"name": "Calendar",
"data": [
{
"x": "Q1",
"children": [
{
"x": "Jan",
"y": 42
},
{
"x": "Feb",
"y": 38
},
{
"x": "Mar",
"y": 51
}
]
},
{
"x": "Q2",
"children": [
{
"x": "Apr",
"y": 47
},
{
"x": "May",
"y": 55
},
{
"x": "Jun",
"y": 61
}
]
},
{
"x": "Q3",
"children": [
{
"x": "Jul",
"y": 58
},
{
"x": "Aug",
"y": 66
},
{
"x": "Sep",
"y": 72
}
]
},
{
"x": "Q4",
"children": [
{
"x": "Oct",
"y": 69
},
{
"x": "Nov",
"y": 78
},
{
"x": "Dec",
"y": 84
}
]
}
]
}
]
}
}
}import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
42,
38,
51,
47,
55,
61,
58,
66,
72,
69,
78,
84
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"link": {
"mode": "map",
"map": (s) => (s.depth === 0 ? range(0, 3).map((k) => (+s.name.slice(1) * 3 + k) % 12) : [(months.indexOf(s.name) + 3) % 12]),
"unit": "months"
},
"fill": {
"type": "value",
"stops": [
"#3b82f6",
"#8b5cf6",
"#d946ef"
]
},
"layers": [
{
"type": "sunburst",
"name": "Calendar",
"data": [
{
"x": "Q1",
"children": [
{
"x": "Jan",
"y": 42
},
{
"x": "Feb",
"y": 38
},
{
"x": "Mar",
"y": 51
}
]
},
{
"x": "Q2",
"children": [
{
"x": "Apr",
"y": 47
},
{
"x": "May",
"y": 55
},
{
"x": "Jun",
"y": 61
}
]
},
{
"x": "Q3",
"children": [
{
"x": "Jul",
"y": 58
},
{
"x": "Aug",
"y": 66
},
{
"x": "Sep",
"y": 72
}
]
},
{
"x": "Q4",
"children": [
{
"x": "Oct",
"y": 69
},
{
"x": "Nov",
"y": 78
},
{
"x": "Dec",
"y": 84
}
]
}
]
}
]
}
}
}
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 radial-column-multi-modes.json --out radial-column-multi-modes.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/radial-column/multi-modes/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?