Rückgängig / Wiederholen
Zoomen Sie, blenden Sie Datenreihen aus oder laden Sie neue Daten und gehen Sie anschließend über Werkzeugleiste, Schaltflächen oder Ctrl/Cmd+Z zurück.
Diagramm ohne Website-Rahmen öffnen ↗
const options = {
chart: {
height: 360,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
zoom: {
enabled: true
},
history: {
enabled: true,
wcc: {
toolbar: true,
recordData: true
}
},
events: {
wccHistoryChange: () => upd()
}
},
series: [
{
name: "Web",
data: [
[1767571200000, 61.5],
[1768176000000, 60.9],
[1768780800000, 59.4],
[1769385600000, 60.6],
[1769990400000, 58.4],
[1770595200000, 56.5],
[1771200000000, 57.5],
[1771804800000, 57.4],
[1772409600000, 56.3],
[1773014400000, 54.2],
[1773619200000, 56.5],
[1774224000000, 58.4],
[1774828800000, 57.4],
[1775433600000, 58.8],
[1776038400000, 60.3],
[1776643200000, 60.8],
[1777248000000, 58.6],
[1777852800000, 58.8],
[1778457600000, 60.2],
[1779062400000, 60.3],
[1779667200000, 59.8],
[1780272000000, 60.2],
[1780876800000, 59.3],
[1781481600000, 60],
[1782086400000, 60.3],
[1782691200000, 61.9],
[1783296000000, 63.6],
[1783900800000, 65.1],
[1784505600000, 65.2],
[1785110400000, 66.7],
[1785715200000, 64.8],
[1786320000000, 66.6],
[1786924800000, 68],
[1787529600000, 69.8],
[1788134400000, 70.1],
[1788739200000, 67.8],
[1789344000000, 67.3],
[1789948800000, 67.9],
[1790553600000, 65.5],
[1791158400000, 63.8]
]
},
{
name: "App",
data: [
[1767571200000, 81.5],
[1768176000000, 83.4],
[1768780800000, 81.6],
[1769385600000, 83.1],
[1769990400000, 82.1],
[1770595200000, 80.3],
[1771200000000, 78.8],
[1771804800000, 78.1],
[1772409600000, 76.4],
[1773014400000, 75.9],
[1773619200000, 76.7],
[1774224000000, 75.5],
[1774828800000, 74.6],
[1775433600000, 74],
[1776038400000, 76.6],
[1776643200000, 74.6],
[1777248000000, 76.2],
[1777852800000, 75.1],
[1778457600000, 76.6],
[1779062400000, 78.7],
[1779667200000, 78.5],
[1780272000000, 77.9],
[1780876800000, 75.9],
[1781481600000, 75.6],
[1782086400000, 76.1],
[1782691200000, 78.2],
[1783296000000, 76.2],
[1783900800000, 78.4],
[1784505600000, 80.9],
[1785110400000, 80.8],
[1785715200000, 78.5],
[1786320000000, 80.5],
[1786924800000, 81.6],
[1787529600000, 80.7],
[1788134400000, 78.4],
[1788739200000, 80.3],
[1789344000000, 81.8],
[1789948800000, 79.8],
[1790553600000, 81.4],
[1791158400000, 79.5]
]
},
{
name: "Retail",
data: [
[1767571200000, 100.9],
[1768176000000, 103],
[1768780800000, 103.7],
[1769385600000, 103.6],
[1769990400000, 105.5],
[1770595200000, 107.5],
[1771200000000, 108.1],
[1771804800000, 107.7],
[1772409600000, 108.2],
[1773014400000, 110.4],
[1773619200000, 108.1],
[1774224000000, 109.6],
[1774828800000, 107.5],
[1775433600000, 106],
[1776038400000, 103.9],
[1776643200000, 102.9],
[1777248000000, 105.3],
[1777852800000, 103.7],
[1778457600000, 103.2],
[1779062400000, 104.8],
[1779667200000, 103.7],
[1780272000000, 104.7],
[1780876800000, 102.6],
[1781481600000, 101.1],
[1782086400000, 101],
[1782691200000, 103.5],
[1783296000000, 102.1],
[1783900800000, 104.4],
[1784505600000, 102.7],
[1785110400000, 103.9],
[1785715200000, 101.9],
[1786320000000, 102.3],
[1786924800000, 104.3],
[1787529600000, 106.2],
[1788134400000, 107.4],
[1788739200000, 109],
[1789344000000, 107.6],
[1789948800000, 110.1],
[1790553600000, 112.1],
[1791158400000, 110.8]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
title: {
text: "Weekly orders"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import history from 'west-coast-charts/features/history'
WestCoastCharts.use(types).use(history)
const options = {
chart: {
height: 360,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
zoom: {
enabled: true
},
history: {
enabled: true,
wcc: {
toolbar: true,
recordData: true
}
},
events: {
wccHistoryChange: () => upd()
}
},
series: [
{
name: "Web",
data: [
[1767571200000, 61.5],
[1768176000000, 60.9],
[1768780800000, 59.4],
[1769385600000, 60.6],
[1769990400000, 58.4],
[1770595200000, 56.5],
[1771200000000, 57.5],
[1771804800000, 57.4],
[1772409600000, 56.3],
[1773014400000, 54.2],
[1773619200000, 56.5],
[1774224000000, 58.4],
[1774828800000, 57.4],
[1775433600000, 58.8],
[1776038400000, 60.3],
[1776643200000, 60.8],
[1777248000000, 58.6],
[1777852800000, 58.8],
[1778457600000, 60.2],
[1779062400000, 60.3],
[1779667200000, 59.8],
[1780272000000, 60.2],
[1780876800000, 59.3],
[1781481600000, 60],
[1782086400000, 60.3],
[1782691200000, 61.9],
[1783296000000, 63.6],
[1783900800000, 65.1],
[1784505600000, 65.2],
[1785110400000, 66.7],
[1785715200000, 64.8],
[1786320000000, 66.6],
[1786924800000, 68],
[1787529600000, 69.8],
[1788134400000, 70.1],
[1788739200000, 67.8],
[1789344000000, 67.3],
[1789948800000, 67.9],
[1790553600000, 65.5],
[1791158400000, 63.8]
]
},
{
name: "App",
data: [
[1767571200000, 81.5],
[1768176000000, 83.4],
[1768780800000, 81.6],
[1769385600000, 83.1],
[1769990400000, 82.1],
[1770595200000, 80.3],
[1771200000000, 78.8],
[1771804800000, 78.1],
[1772409600000, 76.4],
[1773014400000, 75.9],
[1773619200000, 76.7],
[1774224000000, 75.5],
[1774828800000, 74.6],
[1775433600000, 74],
[1776038400000, 76.6],
[1776643200000, 74.6],
[1777248000000, 76.2],
[1777852800000, 75.1],
[1778457600000, 76.6],
[1779062400000, 78.7],
[1779667200000, 78.5],
[1780272000000, 77.9],
[1780876800000, 75.9],
[1781481600000, 75.6],
[1782086400000, 76.1],
[1782691200000, 78.2],
[1783296000000, 76.2],
[1783900800000, 78.4],
[1784505600000, 80.9],
[1785110400000, 80.8],
[1785715200000, 78.5],
[1786320000000, 80.5],
[1786924800000, 81.6],
[1787529600000, 80.7],
[1788134400000, 78.4],
[1788739200000, 80.3],
[1789344000000, 81.8],
[1789948800000, 79.8],
[1790553600000, 81.4],
[1791158400000, 79.5]
]
},
{
name: "Retail",
data: [
[1767571200000, 100.9],
[1768176000000, 103],
[1768780800000, 103.7],
[1769385600000, 103.6],
[1769990400000, 105.5],
[1770595200000, 107.5],
[1771200000000, 108.1],
[1771804800000, 107.7],
[1772409600000, 108.2],
[1773014400000, 110.4],
[1773619200000, 108.1],
[1774224000000, 109.6],
[1774828800000, 107.5],
[1775433600000, 106],
[1776038400000, 103.9],
[1776643200000, 102.9],
[1777248000000, 105.3],
[1777852800000, 103.7],
[1778457600000, 103.2],
[1779062400000, 104.8],
[1779667200000, 103.7],
[1780272000000, 104.7],
[1780876800000, 102.6],
[1781481600000, 101.1],
[1782086400000, 101],
[1782691200000, 103.5],
[1783296000000, 102.1],
[1783900800000, 104.4],
[1784505600000, 102.7],
[1785110400000, 103.9],
[1785715200000, 101.9],
[1786320000000, 102.3],
[1786924800000, 104.3],
[1787529600000, 106.2],
[1788134400000, 107.4],
[1788739200000, 109],
[1789344000000, 107.6],
[1789948800000, 110.1],
[1790553600000, 112.1],
[1791158400000, 110.8]
]
}
],
xaxis: {
type: "datetime"
},
stroke: {
width: 2
},
title: {
text: "Weekly orders"
},
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 narrative-state-undo-redo.json --out narrative-state-undo-redo.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/narrative-state/undo-redo/index.md …