终极指南：使用Livebook与Kino创建交互式可视化与自定义组件

Livebook是一款革命性的Elixir交互式笔记本工具，它通过与Kino库的深度集成，为数据科学家、开发者和教育工作者提供了强大的交互式可视化与自定义组件功能。无论您是数据分析师、机器学习工程师还是教育工作者，Livebook都能帮助您创建动态、交互式的数据探索体验。## 什么是Livebook与Kino？Livebook是一个基于Web的交互式代码笔记本，专为Elixir语言设计。而

袁菲李

1160人浏览 · 2026-03-30 15:27:18

袁菲李 · 2026-03-30 15:27:18 发布

终极指南：使用Livebook与Kino创建交互式可视化与自定义组件

【免费下载链接】livebook Automate code & data workflows with interactive Elixir notebooks 项目地址: https://gitcode.com/gh_mirrors/li/livebook

Livebook是一款革命性的Elixir交互式笔记本工具，它通过与Kino库的深度集成，为数据科学家、开发者和教育工作者提供了强大的交互式可视化与自定义组件功能。无论您是数据分析师、机器学习工程师还是教育工作者，Livebook都能帮助您创建动态、交互式的数据探索体验。

什么是Livebook与Kino？

Livebook是一个基于Web的交互式代码笔记本，专为Elixir语言设计。而Kino则是Livebook的扩展库，负责处理交互式输出和可视化组件。通过Kino，您可以在Livebook中创建丰富的交互式界面，包括图表、表格、表单和自定义组件。

核心功能概览

Livebook与Kino的集成提供了以下核心功能：

交互式输入控件：文本输入、数字滑块、下拉选择器等
数据可视化：Vega-Lite图表、数据表格、树状视图
动态组件：实时更新的图表和界面元素
自定义组件：使用Elixir和JavaScript创建专属交互组件
智能单元格：预构建的代码模板和自动化工作流

内置Kino组件快速入门

Livebook内置了丰富的Kino组件，让您能够快速创建交互式界面：

基础输入组件

# 文本输入
name = Kino.Input.text("请输入您的姓名")

# 数字输入
age = Kino.Input.number("年龄", default: 25, min: 0, max: 120)

# 下拉选择
color = Kino.Input.select("选择颜色", ["红色", "蓝色", "绿色", "黄色"])

数据可视化组件

Livebook支持多种数据可视化方式：

# 数据表格
data = [
  %{id: 1, name: "张三", score: 95},
  %{id: 2, name: "李四", score: 88},
  %{id: 3, name: "王五", score: 92}
]

Kino.DataTable.new(data)

图：Livebook中的交互式代码执行与远程单元格

创建自定义Kino组件

Livebook最强大的功能之一是能够创建自定义Kino组件。您可以使用Kino.JS和Kino.JS.Live模块构建完全自定义的交互式界面。

静态HTML组件

最简单的自定义组件是静态HTML渲染器：

defmodule MyApp.HTMLRenderer do
  use Kino.JS
  
  def new(html) when is_binary(html) do
    Kino.JS.new(__MODULE__, html)
  end
  
  asset "main.js" do
    """
    export function init(ctx, html) {
      ctx.root.innerHTML = html;
    }
    """
  end
end

动态交互式组件

对于需要双向通信的组件，使用Kino.JS.Live：

defmodule MyApp.Counter do
  use Kino.JS
  use Kino.JS.Live
  
  def new(initial_count) do
    Kino.JS.Live.new(__MODULE__, initial_count)
  end
  
  def increment(kino) do
    Kino.JS.Live.cast(kino, :increment)
  end
  
  @impl true
  def init(count, ctx) do
    {:ok, assign(ctx, count: count)}
  end
  
  @impl true
  def handle_connect(ctx) do
    {:ok, ctx.assigns.count, ctx}
  end
  
  @impl true
  def handle_cast(:increment, ctx) do
    new_count = ctx.assigns.count + 1
    ctx = assign(ctx, count: new_count)
    broadcast_event(ctx, "update", new_count)
    {:noreply, ctx}
  end
  
  @impl true
  def handle_event("increment", _, ctx) do
    new_count = ctx.assigns.count + 1
    ctx = assign(ctx, count: new_count)
    broadcast_event(ctx, "update", new_count)
    {:noreply, ctx}
  end
end

智能单元格：自动化工作流

智能单元格是Livebook的高级功能，允许您创建可重用的代码模板和自动化工作流。您可以在lib/livebook/notebook/learn/kino/smart_cells.livemd中找到完整的智能单元格示例。

创建智能单元格的基本步骤：

定义模块结构：使用Kino.SmartCell定义智能单元格
配置属性：定义单元格的输入参数和配置选项
生成代码：根据用户输入动态生成Elixir代码
添加JavaScript交互：创建前端界面

实际应用场景

数据科学分析

Livebook与Kino的结合非常适合数据科学工作流：

# 安装数据可视化库
Mix.install([
  {:kino_vega_lite, "~> 0.1.13"},
  {:explorer, "~> 0.8.0"}
])

# 加载和可视化数据
alias Explorer.DataFrame, as: DF

data = DF.from_csv!("data.csv")
chart = VegaLite.new()
  |> VegaLite.data_from_values(data)
  |> VegaLite.mark(:line)
  |> VegaLite.encode_field(:x, "date", type: :temporal)
  |> VegaLite.encode_field(:y, "value", type: :quantitative)

Kino.VegaLite.new(chart)

教育工具开发

为教学创建交互式学习材料：

defmodule MathQuiz do
  use Kino.JS
  use Kino.JS.Live
  
  def new() do
    Kino.JS.Live.new(__MODULE__, :ok)
  end
  
  asset "main.js" do
    """
    export function init(ctx) {
      const root = ctx.root;
      
      // 创建数学测验界面
      const question = document.createElement('div');
      question.textContent = '3 × 7 = ?';
      root.appendChild(question);
      
      const input = document.createElement('input');
      input.type = 'number';
      root.appendChild(input);
      
      const button = document.createElement('button');
      button.textContent = '检查答案';
      root.appendChild(button);
      
      button.addEventListener('click', () => {
        const answer = parseInt(input.value);
        const correct = answer === 21;
        ctx.pushEvent('answer', {answer: answer, correct: correct});
      });
    }
    
    export function handleEvent(ctx, event, data) {
      if (event === 'feedback') {
        const feedback = document.createElement('div');
        feedback.textContent = data.correct ? '正确！' : '再试一次';
        ctx.root.appendChild(feedback);
      }
    }
    """
  end
  
  @impl true
  def init(_arg, ctx) do
    {:ok, assign(ctx, score: 0)}
  end
  
  @impl true
  def handle_event("answer", %{"answer" => answer, "correct" => correct}, ctx) do
    if correct do
      new_score = ctx.assigns.score + 10
      ctx = assign(ctx, score: new_score)
      broadcast_event(ctx, "feedback", %{correct: true})
    else
      broadcast_event(ctx, "feedback", %{correct: false})
    end
    {:noreply, ctx}
  end
end

最佳实践与性能优化

1. 组件设计原则

保持组件简单：每个组件应该只负责一个明确的功能
合理使用状态管理：对于复杂组件，考虑使用状态管理策略
优化渲染性能：避免不必要的DOM操作和重渲染

2. 代码组织建议

将自定义Kino组件组织在专门的目录结构中：

lib/
├── my_app/
│   ├── kinos/
│   │   ├── data_viz.ex
│   │   ├── forms.ex
│   │   └── charts.ex
│   └── smart_cells/
│       ├── database_query.ex
│       └── api_client.ex

3. 测试策略

为自定义组件编写测试：

defmodule MyApp.Kinos.DataVizTest do
  use ExUnit.Case, async: true
  
  test "creates visualization with valid data" do
    data = [%{x: 1, y: 2}, %{x: 3, y: 4}]
    kino = MyApp.DataViz.new(data)
    assert %Kino.JS{} = kino
  end
end