{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Highcharts 图表\n",
    "\n",
    "使用[Highcharts](https://www.highcharts.com/)创建图表的元素。可以通过更改 `options` 属性来向图表推送更新。数据变更后，调用 `update` 方法刷新图表。\n",
    "\n",
    "由于Highcharts的限制性许可证，该元素不是标准NiceGUI包的一部分。它维护在一个[单独的仓库](https://github.com/zauberzeug/nicegui-highcharts/)中，可以通过 `pip install nicegui[highcharts]` 进行安装。\n",
    "\n",
    "默认情况下，会创建一个 `Highcharts.chart`。要使用例如 `Highcharts.stockChart`，请将 `type` 属性设置为 `\"stockChart\"`。\n",
    "\n",
    "- `options`: Highcharts 选项的字典\n",
    "- `type`: 图表类型（例如`\"chart\"`, `\"stockChart\"`, `\"mapChart\"`...; 默认：`\"chart\"`）\n",
    "- `extras`: 要包含的额外依赖项列表（例如`\"annotations\"`, `\"arc-diagram\"`, `\"solid-gauge\"`...）\n",
    "- `on_point_click`: 点击点时调用的回调函数\n",
    "- `on_point_drag_start`: 开始拖动点时调用的回调函数\n",
    "- `on_point_drag`: 拖动点时调用的回调函数\n",
    "- `on_point_drop`: 放下点时调用的回调函数"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```python\n",
    "from nicegui import ui\n",
    "from random import random\n",
    "\n",
    "chart = ui.highchart({\n",
    "    'title': False,\n",
    "    'chart': {'type': 'bar'},\n",
    "    'xAxis': {'categories': ['A', 'B']},\n",
    "    'series': [\n",
    "        {'name': 'Alpha', 'data': [0.1, 0.2]},\n",
    "        {'name': 'Beta', 'data': [0.3, 0.4]},\n",
    "    ],\n",
    "}).classes('w-full h-64')\n",
    "\n",
    "def update():\n",
    "    chart.options['series'][0]['data'][0] = random()\n",
    "    chart.update()\n",
    "\n",
    "ui.button('Update', on_click=update)\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 外部依赖\n",
    "\n",
    "要使用默认依赖项中未包含的图表类型，您可以指定额外的依赖项。这个演示展示了一个实心仪表盘图。\n",
    "\n",
    "```python\n",
    "from nicegui import ui\n",
    "\n",
    "ui.highchart({\n",
    "    'title': False,\n",
    "    'chart': {'type': 'solidgauge'},\n",
    "    'yAxis': {\n",
    "        'min': 0,\n",
    "        'max': 1,\n",
    "    },\n",
    "    'series': [\n",
    "        {'data': [0.42]},\n",
    "    ],\n",
    "}, extras=['solid-gauge']).classes('w-full h-64')\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 可拖曳点\n",
    "\n",
    "这个图表允许拖动序列点。您可以为以下事件注册回调函数：\n",
    "\n",
    "- `on_point_click`: 点击点时调用\n",
    "- `on_point_drag_start`: 开始拖动点时调用\n",
    "- `on_point_drag`: 拖动点时调用\n",
    "- `on_point_drop`: 放下点时调用"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```python\n",
    "from nicegui import ui\n",
    "\n",
    "ui.highchart(\n",
    "    {\n",
    "        'title': False,\n",
    "        'plotOptions': {\n",
    "            'series': {\n",
    "                'stickyTracking': False,\n",
    "                'dragDrop': {'draggableY': True, 'dragPrecisionY': 1},\n",
    "            },\n",
    "        },\n",
    "        'series': [\n",
    "            {'name': 'A', 'data': [[20, 10], [30, 20], [40, 30]]},\n",
    "            {'name': 'B', 'data': [[50, 40], [60, 50], [70, 60]]},\n",
    "        ],\n",
    "    },\n",
    "    extras=['draggable-points'],\n",
    "    on_point_click=lambda e: ui.notify(f'Click: {e}'),\n",
    "    on_point_drag_start=lambda e: ui.notify(f'Drag start: {e}'),\n",
    "    on_point_drop=lambda e: ui.notify(f'Drop: {e}')\n",
    ").classes('w-full h-64')\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "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
}