Serverauslastung live: Messgerät aktuell, Ring der letzten 60 Minuten
Das Messgerät in der Mitte zeigt die aktuelle Auslastung; der Ring aus Säulen zeigt dieselbe Kennzahl über die letzten 60 Minuten, mit dem neuesten Wert am gestrichelten „now“-Tick. Bei jedem Tick wird das Messgerät animiert und die älteste Minute aus dem Ring entfernt (Simulation; pausiert, solange der Tab verborgen ist).
Zeitringe und Ziele
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": 560,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Load",
"data": [
34,
40,
48,
55,
62,
66,
68,
66,
60,
51,
49,
46,
43,
41,
41,
43,
45,
48,
49,
58,
63,
65,
63,
58,
51,
43,
35,
28,
32,
38,
45,
51,
57,
60,
60,
57,
50,
49,
46,
42,
38,
35,
35,
35,
37,
39,
48,
55,
60,
60,
57,
51,
43,
34,
25,
27,
30,
35,
40,
46
]
}
],
"xaxis": {
"categories": [
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.62,
"startAngle": -150,
"endAngle": 150,
"hole": "70%",
"fill": {
"type": "value",
"stops": [
"#22c55e",
"#a3e635",
"#f59e0b",
"#ef4444"
]
},
"valueAxis": {
"min": 0,
"max": 100,
"labels": {
"formatter": function (v) { return v + '%' }
}
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return /0$/.test(c) && o.index > 2 && o.index < 55 ? c : '' }
},
"link": {
"mode": "auto",
"unit": "minutes"
},
"layers": [
{
"type": "gauge",
"name": "Load now",
"follow": "Load",
"startAngle": -125,
"endAngle": 125,
"thickness": 16,
"formatter": function (v) { return Math.round(v) + '%' },
"bands": [
{
"to": 55,
"color": "#22c55e"
},
{
"to": 75,
"color": "#f59e0b"
},
{
"to": 100,
"color": "#ef4444"
}
]
}
]
}
}
}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": 560,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Load",
"data": [
34,
40,
48,
55,
62,
66,
68,
66,
60,
51,
49,
46,
43,
41,
41,
43,
45,
48,
49,
58,
63,
65,
63,
58,
51,
43,
35,
28,
32,
38,
45,
51,
57,
60,
60,
57,
50,
49,
46,
42,
38,
35,
35,
35,
37,
39,
48,
55,
60,
60,
57,
51,
43,
34,
25,
27,
30,
35,
40,
46
]
}
],
"xaxis": {
"categories": [
"13:00",
"13:01",
"13:02",
"13:03",
"13:04",
"13:05",
"13:06",
"13:07",
"13:08",
"13:09",
"13:10",
"13:11",
"13:12",
"13:13",
"13:14",
"13:15",
"13:16",
"13:17",
"13:18",
"13:19",
"13:20",
"13:21",
"13:22",
"13:23",
"13:24",
"13:25",
"13:26",
"13:27",
"13:28",
"13:29",
"13:30",
"13:31",
"13:32",
"13:33",
"13:34",
"13:35",
"13:36",
"13:37",
"13:38",
"13:39",
"13:40",
"13:41",
"13:42",
"13:43",
"13:44",
"13:45",
"13:46",
"13:47",
"13:48",
"13:49",
"13:50",
"13:51",
"13:52",
"13:53",
"13:54",
"13:55",
"13:56",
"13:57",
"13:58",
"13:59"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.62,
"startAngle": -150,
"endAngle": 150,
"hole": "70%",
"fill": {
"type": "value",
"stops": [
"#22c55e",
"#a3e635",
"#f59e0b",
"#ef4444"
]
},
"valueAxis": {
"min": 0,
"max": 100,
"labels": {
"formatter": function (v) { return v + '%' }
}
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return /0$/.test(c) && o.index > 2 && o.index < 55 ? c : '' }
},
"link": {
"mode": "auto",
"unit": "minutes"
},
"layers": [
{
"type": "gauge",
"name": "Load now",
"follow": "Load",
"startAngle": -125,
"endAngle": 125,
"thickness": 16,
"formatter": function (v) { return Math.round(v) + '%' },
"bands": [
{
"to": 55,
"color": "#22c55e"
},
{
"to": 75,
"color": "#f59e0b"
},
{
"to": 100,
"color": "#ef4444"
}
]
}
]
}
}
}
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-gauge-live.json --out radial-column-gauge-live.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/gauge-live/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?