Teamziele: sieben Ringe in einem Monat voller Ergebnisse
Aktivitätsringe für Ziele, einer je Team (beliebig viele; Stärke und Abstände passen sich dem verfügbaren Platz an). Oberhalb von 100 % läuft der Ring über sich selbst; der Abschluss erhält einen weichen Schatten. Außen: täglich erledigte Arbeitspakete. Einen Ring mit dem Mauszeiger hervorheben, um die Tage zu markieren, an denen das Team sein Tagesziel erreicht hat; einen Tag hervorheben, um die entsprechenden Teams zu sehen.
Zeitringe und Ziele
Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"type": "radialColumn",
"height": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Items shipped",
"data": [
46,
61,
68,
53,
45,
13,
9,
52,
67,
63,
59,
40,
8,
15,
47,
62,
69,
54,
45,
14,
10,
54,
57,
63,
59,
40,
9,
17,
49,
64
]
}
],
"xaxis": {
"categories": [
"Oct 1",
"Oct 2",
"Oct 3",
"Oct 4",
"Oct 5",
"Oct 6",
"Oct 7",
"Oct 8",
"Oct 9",
"Oct 10",
"Oct 11",
"Oct 12",
"Oct 13",
"Oct 14",
"Oct 15",
"Oct 16",
"Oct 17",
"Oct 18",
"Oct 19",
"Oct 20",
"Oct 21",
"Oct 22",
"Oct 23",
"Oct 24",
"Oct 25",
"Oct 26",
"Oct 27",
"Oct 28",
"Oct 29",
"Oct 30"
]
},
"colors": [
"#94a3b8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.64,
"center": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 5 === 0 ? c : '' }
},
"link": {
"mode": "map",
"unit": "days"
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
]
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.82,
"hole": "12%",
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
],
"thickness": "auto",
"gap": 2,
"ringGap": 1
}
]
}
}
}
}
]
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()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": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Items shipped",
"data": [
46,
61,
68,
53,
45,
13,
9,
52,
67,
63,
59,
40,
8,
15,
47,
62,
69,
54,
45,
14,
10,
54,
57,
63,
59,
40,
9,
17,
49,
64
]
}
],
"xaxis": {
"categories": [
"Oct 1",
"Oct 2",
"Oct 3",
"Oct 4",
"Oct 5",
"Oct 6",
"Oct 7",
"Oct 8",
"Oct 9",
"Oct 10",
"Oct 11",
"Oct 12",
"Oct 13",
"Oct 14",
"Oct 15",
"Oct 16",
"Oct 17",
"Oct 18",
"Oct 19",
"Oct 20",
"Oct 21",
"Oct 22",
"Oct 23",
"Oct 24",
"Oct 25",
"Oct 26",
"Oct 27",
"Oct 28",
"Oct 29",
"Oct 30"
]
},
"colors": [
"#94a3b8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.64,
"center": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 5 === 0 ? c : '' }
},
"link": {
"mode": "map",
"unit": "days"
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
]
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.82,
"hole": "12%",
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
],
"thickness": "auto",
"gap": 2,
"ringGap": 1
}
]
}
}
}
}
]
}
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-goals-team.json --out radial-column-goals-team.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/goals-team/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?