{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotly 图表\n",
    "\n",
    "渲染一个Plotly图表。有两种方法可以传递一个用于渲染的Plotly图形，参见参数 `figure``:\n",
    "\n",
    "- 传递 [`go.Figure` 对象](https://plotly.com/python/)\n",
    "- [传递包含键 `data`, `layout`, `config`（可选）的 Python 字典对象](https://plotly.com/javascript/)\n",
    "- 为了获得最佳性能，请使用声明式字典方法创建Plotly图表。\n",
    "\n",
    "`figure`: 需要渲染的Plotly图形。可以是 `go.Figure` 实例，或者是一个带有键 `data`, `layout`, `config`（可选）的字典对象。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.plotly.Plotly at 0x20b2dd6df10>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import plotly.graph_objects as go\n",
    "from nicegui import ui\n",
    "\n",
    "fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))\n",
    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
    "ui.plotly(fig).classes('w-full h-40')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 字典接口\n",
    "\n",
    "这个演示展示了如何使用声明式字典接口创建图表。对于具有许多迹线和数据点的图表，这比面向对象接口更高效。定义对应于[JavaScript Plotly API](https://plotly.com/javascript/)。由于默认值不同，生成的图表可能与使用面向对象接口创建的相同图表略有不同，但功能是相同的。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.plotly.Plotly at 0x20b42242150>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "fig = {\n",
    "    'data': [\n",
    "        {\n",
    "            'type': 'scatter',\n",
    "            'name': 'Trace 1',\n",
    "            'x': [1, 2, 3, 4],\n",
    "            'y': [1, 2, 3, 2.5],\n",
    "        },\n",
    "        {\n",
    "            'type': 'scatter',\n",
    "            'name': 'Trace 2',\n",
    "            'x': [1, 2, 3, 4],\n",
    "            'y': [1.4, 1.8, 3.8, 3.2],\n",
    "            'line': {'dash': 'dot', 'width': 3},\n",
    "        },\n",
    "    ],\n",
    "    'layout': {\n",
    "        'margin': {'l': 15, 'r': 0, 't': 0, 'b': 15},\n",
    "        'plot_bgcolor': '#E5ECF6',\n",
    "        'xaxis': {'gridcolor': 'white'},\n",
    "        'yaxis': {'gridcolor': 'white'},\n",
    "    },\n",
    "}\n",
    "ui.plotly(fig).classes('w-full h-40')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 更新图\n",
    "\n",
    "这个演示展示了如何实时更新图表。点击按钮向图表中添加新的痕迹线。要发送新的图表到浏览器，确保明确调用 `plot.update()` 或 `ui.update(plot)`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x20b422322d0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import plotly.graph_objects as go\n",
    "from nicegui import ui\n",
    "from random import random\n",
    "\n",
    "fig = go.Figure()\n",
    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
    "plot = ui.plotly(fig).classes('w-full h-40')\n",
    "\n",
    "def add_trace():\n",
    "    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]))\n",
    "    plot.update()\n",
    "\n",
    "ui.button('Add trace', on_click=add_trace)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## plotly 事件\n",
    "\n",
    "这个演示展示了如何处理Plotly事件。尝试点击一个数据点以查看事件数据。\n",
    "\n",
    "目前，支持以下事件：`\"plotly_click\"`（点击），`\"plotly_legendclick\"`（图例点击），`\"plotly_selecting\"`（选择中），`\"plotly_selected\"`（选中），`\"plotly_hover\"`（悬停），`\"plotly_unhover\"`（取消悬停），`\"plotly_legenddoubleclick\"`（双击图例），`\"plotly_restyle\"`（重新样式化），`\"plotly_relayout\"`（重新布局），`\"plotly_webglcontextlost\"`（WebGL上下文丢失），`\"plotly_afterplot\"`（绘制后），`\"plotly_autosize\"`（自动调整大小），`\"plotly_deselect\"`（取消选择），`\"plotly_doubleclick\"`（双击），`\"plotly_redraw\"`（重绘），`\"plotly_animated\"`（动画）。更多信息请参阅[Plotly文档](https://plotly.com/javascript/plotlyjs-events/)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.plotly.Plotly at 0x20b42242650>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import plotly.graph_objects as go\n",
    "from nicegui import ui\n",
    "\n",
    "fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))\n",
    "fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))\n",
    "plot = ui.plotly(fig).classes('w-full h-40')\n",
    "plot.on('plotly_click', ui.notify)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}