Plotly

Plotkliwa wizualizacja.

Opcje

• data | array (required): siatka danych. Default: none.
• draggable | boolean: kontroluje, czy działka powinna być wleczona. Default: false.
• editable | boolean: kontroluje, czy etykiety utworzonej działki nadają się do edycji. Default: false.
• id | string: identyfikator elementu. Default: none.
• layout | object: Obiekt w układzie planowym. Default: {}.
• config | object: Opcje konfiguracyjne Plotly (patrz: https://plotly.com/javascript/configuration-options/). Default: {}.
• legendButtons | boolean: kontroluje, czy mają być wyświetlane przyciski do zmiany legendy. Default: true.
• meta | object: fabuła meta-informacja. Default: none.
• revision | number: po dostarczeniu, powoduje, że wykres jest aktualizowany, gdy wartość korekty jest zwiększana. Default: none.
• style | object: Style CSS inline. Default: {}.
• onAfterPlot | function: funkcja callback wywoływana przy każdym wykresie. Default: onAfterPlot() {}.
• onClick | function: funkcja callback wywoływana po kliknięciu dowolnego elementu. Default: onClick() {}.
• onInitialized | function: callback wywoływany po zainicjowaniu wykresu; wywoływany za pomocą figury (obiekt z trzema klawiszami odpowiadającymi rekwizytom wejściowym: data, layout i ramki) oraz węzła DOM graphDiv. Default: onInitialized() {}.
• onLegendClick | function: funkcja callback wywoływana po kliknięciu pozycji legendy. Default: onLegendClick() {}.
• onLegendDoubleClick | function: funkcja callback wywoływana po dwukrotnym kliknięciu elementu legendy. Default: onLegendDoubleClick() {}.
• onRelayout | function: funkcja wywołań zwrotnych wywoływanych w przypadku zadziałania przekaźnika. Default: onRelayout() {}.
• onSelected | function: funkcja wywołania zwrotnego po wybraniu elementów. Default: onSelected() {}.
• onShare | function: funkcja wywołania zwrotnego po kliknięciu na przycisk "Udostępnij". Default: none.
• removeButtons | boolean: kontroluje, czy usunąć wszystkie przyciski (oprócz przycisku pełnoekranowego, jeśli jest włączony). Default: false.
• toggleFullscreen | boolean: kontroluje, czy pozwolić na wyświetlanie wykresu w trybie pełnoekranowym. Default: true.

Przykłady

Edytor na żywo

<Plotly data={[{ values: [ 24, 7, 0.5 ], labels: [ 'English', 'Spanish', 'Other' ], type: 'pie' }]} layout={{ width: 300 }} />

<Plotly
    data={[{
        values: [ 24, 7, 0.5 ],
        labels: [ 'English', 'Spanish', 'Other' ],
        type: 'pie'
            }]}
    layout={{ width: 300 }}
/>

Wynik

ReferenceError: Provider is not defined