Balkendiagramm
In einem Balkendiagramm werden Daten als eine Reihe von Datenpunkten mithilfe von Balken dargestellt.
So fügen Sie Ihrer App die BarChart
Komponente hinzu:
import {BarChart} from '@stripe/ui-extension-sdk/ui';
Es folgt eine Vorschau der BarChart
UI-Komponente:
const sales = [ { date: 'Jan', sold: 1 }, { date: 'Feb', sold: 4 }, { date: 'Mar', sold: 2 }, { date: 'Apr', sold: 3 } ]; <BarChart data={sales} x="date" y="sold" />
Props
Prop | Type | Description |
---|---|---|
data Required |
| The data used to generate the chart. |
x Required |
| The property or accessor for the point on the x axis. |
y Required |
| The property or accessor for the point on the y axis. |
axis |
| Determines whether to render labels and ticks for each axis. |
color |
| Groups data by color based on a property or accessor. |
grid |
| Determines whether to render grid lines for each axis. |
legend |
| Determines whether to render the legend (when more than one item is present). |
tooltip |
| Determines whether to render a tooltip when hovering over the chart. |
z |
| Groups data based on a property or accessor. |
Farbverwendung
Der Kanal color
gruppiert Daten:
const sales = [ { date: 'Jan', sold: 1, product: 'tables' }, { date: 'Jan', sold: 2, product: 'chairs' }, { date: 'Feb', sold: 4, product: 'tables' }, { date: 'Feb', sold: 6, product: 'chairs' }, { date: 'Mar', sold: 2, product: 'tables' }, { date: 'Mar', sold: 4, product: 'chairs' }, { date: 'Apr', sold: 7, product: 'tables', }, { date: 'Apr', sold: 9, product: 'chairs', }, ]; <BarChart data={sales} x="date" y="sold" color="product" />
Achsen- und Wertformatierung
Anstatt eine Zeichenfolge für einen Achsenwert zu übergeben, können Sie eine umfangreichere Formatierung hinzufügen, indem Sie ein Objekt einschließlich der Eigenschaften value
, label
und/oder format
übergeben.
Eigenschaft | Typ | Beschreibung |
---|---|---|
value | string | number | Der Eigenschaftsname im Datensatz (Pflichtangabe). |
label | string | Die Achsenbeschriftung |
format | object | Formatieren Sie Zahlen in einem der unterstützten Währungscodes wie {currency: 'USD'} oder einer unterstützten Einheit wie {unit: 'minute'} . Sie können auch relative Einheiten mit eingeschobenem -per- bilden wie {unit: 'megabyte-per-hour'} . |
<BarChart data={[ { date: 'January', sold: 10, }, { date: 'February', sold: 41, }, { date: 'March', sold: 22, }, { date: 'April', sold: 38, }, ]} x="date" y={{value: 'sold', label: 'Price', format: {currency: 'USD'}}} />
Domain
Um die Mindest- und Höchstwerte einer Achse festzulegen, verwenden Sie die Eigenschaft domain
. Wenn die y
-Achse z. B. immer von 0 bis 10 gehen soll (anstatt sich automatisch an die jeweiligen Daten anzupassen), fügen Sie die Eigenschaft domain
hinzu:
const sales = [ { date: 'Jan', sold: 1, }, { date: 'Feb', sold: 4, }, { date: 'Mar', sold: 2, }, { date: 'Apr', sold: 3, }, ]; <BarChart data={sales} x="date" y={{value: 'sold', label: 'Sold', domain: [0, 10]}} />