GenBI 可视化选谁：Python Matplotlib？HTML ？Tableau？

引言

生成式 BI（Generative BI，GenBI）通过自然语言交互和自动化内容生成，革新了数据分析和商业智能（BI）领域。用户可以通过自然语言提问，GenBI 系统自动生成相应的 SQL 查询、获取数据，并以可视化图表、表格、自然语言摘要等形式呈现分析结果。

可视化是 GenBI 的关键环节，它将数据分析结果以直观易懂的方式呈现给用户，帮助用户快速理解数据、发现洞察、做出决策。那么，在 GenBI 中，如何进行可视化呢？是使用 Python 的 Matplotlib 库，还是直接生成 HTML 代码，或者有其他更好用的工具？

本文将深入探讨 GenBI 可视化的各种方案，比较它们的优缺点，并通过丰富的代码示例和表格进行说明，帮助读者选择最适合自己需求的可视化方法。

1. GenBI 可视化方案概述

在 GenBI 中，可视化方案可以大致分为以下几类：

• 基于 Python 可视化库：

  • Matplotlib: Python 中最基础、最常用的绘图库，可以生成各种静态图表。
  • Seaborn: 基于 Matplotlib 构建的高级绘图库，提供更美观的图表样式和更方便的绘图接口。
  • Plotly: 交互式绘图库，可以生成可在网页上交互的图表。
  • Altair: 基于 Vega-Lite 的声明式可视化库，语法简洁，易于使用。
  • Bokeh: 交互式绘图库，专注于生成可在浏览器中展示的大规模数据集可视化。

• 基于 Web 前端技术：

  • HTML/CSS/JavaScript: 直接生成 HTML、CSS 和 JavaScript 代码来构建图表。
  • JavaScript 可视化库:
    • ECharts: 百度开源的，功能强大、配置灵活的 JavaScript 图表库。
    • D3.js: 底层、灵活的 JavaScript 库，可以创建高度定制化的可视化。
    • Chart.js: 简单易用的 JavaScript 图表库，适用于创建常见图表。

• 集成式 BI 工具：

  • Tableau: 商业 BI 工具，提供强大的可视化功能和交互式仪表盘。
  • Power BI: Microsoft 的商业 BI 工具，提供类似 Tableau 的功能。
  • 其他 BI 工具： 还有许多其他的商业和开源 BI 工具，例如 Qlik Sense, Looker, Superset 等，都提供可视化功能。

• 专门的 GenBI 可视化组件或库:

  • 可能有一些专门为GenBI场景设计的组件，能够更好地处理LLM生成的中间表示。

2. 基于 Python 可视化库

Python 拥有丰富的可视化库，可以满足各种绘图需求。在 GenBI 中，可以使用这些库来生成可视化图表。

2.1. Matplotlib

• 优点：

  • Python 中最基础、最常用的绘图库，学习曲线平缓。
  • 可以生成各种静态图表，例如折线图、柱状图、散点图、饼图等。
  • 可定制性强，可以精细控制图表的各个细节。
  • 有大量的文档和示例可供参考。

• 缺点：

  • 生成的图表是静态的，无法交互。
  • 默认样式比较简单，需要手动调整才能生成美观的图表。
  • 对于大规模数据集的可视化，性能可能较低。

• 代码示例：

import matplotlib.pyplot as plt

def create_bar_chart(data, x_label, y_label, title):
    """
    使用 Matplotlib 创建柱状图。

    Args:
        data: 数据，字典形式，{x_value: y_value}。
        x_label: x 轴标签。
        y_label: y 轴标签。
        title: 图表标题。
    """

    x_values = list(data.keys())
    y_values = list(data.values())

    plt.bar(x_values, y_values)
    plt.xlabel(x_label)
    plt.ylabel(y_label)
    plt.title(title)
    plt.show()  # 或者 plt.savefig('chart.png') 保存为图片

# 示例数据
data = {
    "North America": 1200000,
    "Europe": 950000,
    "Asia": 800000,
}

# 创建柱状图
create_bar_chart(data, "Region", "Sales", "Sales by Region")

2.2. Seaborn

• 优点：

  • 基于 Matplotlib 构建，提供更美观的图表样式和更方便的绘图接口。
  • 可以轻松创建各种统计图表，例如分布图、箱线图、热力图等。
  • 可以自动处理数据分组和颜色映射。

• 缺点：

  • 生成的图表仍然是静态的。
  • 对于某些高级定制化需求，可能不如 Matplotlib 灵活。

• 代码示例：

import seaborn as sns
import matplotlib.pyplot as plt
import pandas as pd

def create_heatmap(data, x_label, y_label, title):
    """
    使用 Seaborn 创建热力图。

    Args:
        data: 数据，二维列表或 DataFrame。
        x_label: x 轴标签。
        y_label: y 轴标签。
        title: 图表标题。
    """
    #将数据转换为DataFrame
    df = pd.DataFrame(data)

    sns.heatmap(df, annot=True, fmt=".1f", cmap="YlGnBu")
    plt.xlabel(x_label)
    plt.ylabel(y_label)
    plt.title(title)
    plt.show()

# 示例数据（二维列表）
data = [
    [10, 20, 30],
    [15, 25, 35],
    [20, 30, 40],
]
create_heatmap(data, "X", "Y", "Heatmap Example")

2.3. Plotly

• 优点：

  • 可以生成交互式图表，用户可以在网页上进行缩放、平移、悬停显示数据等操作。
  • 支持多种图表类型，包括 3D 图表。
  • 可以生成离线 HTML 文件或嵌入到网页中。

• 缺点：

  • 学习曲线比 Matplotlib 和 Seaborn 稍陡峭。
  • 对于非常复杂的定制化需求，可能不如 D3.js 灵活。

• 代码示例：

import plotly.express as px
import pandas as pd

def create_interactive_scatter(data, x_label, y_label, title, color_by=None):
    """
    使用 Plotly 创建交互式散点图。

    Args:
        data: 数据，DataFrame 形式。
        x_label: x 轴标签。
        y_label: y 轴标签。
        title: 图表标题。
        color_by: 用于着色的列名（可选）。
    """
    # color_by 控制颜色
    fig = px.scatter(data, x=x_label, y=y_label, title=title, color=color_by)
    fig.show()  # 或者 fig.write_html('chart.html') 保存为 HTML 文件

# 示例数据
data = pd.DataFrame({
    "x": [1, 2, 3, 4, 5],
    "y": [2, 4, 1, 3, 5],
    "category": ["A", "B", "A", "C", "B"],
})

# 创建交互式散点图
create_interactive_scatter(data, "x", "y", "Scatter Plot Example", color_by="category")

2.4. Altair

• 优点：

  • 基于 Vega-Lite 的声明式可视化库，语法简洁，易于使用。
  • 可以生成交互式图表。
  • 可以轻松处理数据转换和聚合。

• 缺点：

  • 对于非常复杂的图表类型或定制化需求，可能不如 Plotly 或 D3.js 灵活。

• 代码示例：

import altair as alt
import pandas as pd

def create_altair_chart(data, x_field, y_field, chart_type, title):
    """
    使用 Altair 创建图表。

    Args:
        data: 数据，DataFrame 形式。
        x_field: x 轴字段名。
        y_field: y 轴字段名。
        chart_type: 图表类型 ('bar', 'line', 'point', 'area' 等)。
        title: 图表标题

    """

    chart = alt.Chart(data, title=title).mark_point().encode(
        x=x_field,
        y=y_field,
        tooltip=[x_field, y_field]  # 鼠标悬停时显示的信息
    )

    if chart_type == 'bar':
       chart = alt.Chart(data, title=title).mark_bar().encode(
        x=x_field,
        y=y_field,
        tooltip=[x_field, y_field]
       )
    elif chart_type == 'line':
      chart = alt.Chart(data, title=title).mark_line().encode(
        x=x_field,
        y=y_field,
        tooltip=[x_field, y_field]
      )
    elif chart_type == 'area':
        chart = alt.Chart(data, title=title).mark_area().encode(
        x=x_field,
        y=y_field,
        tooltip=[x_field, y_field]
        )

    chart.show()  # 或者 chart.save('chart.html') 保存为 HTML 文件

# 示例数据
data = pd.DataFrame({
    "year": [2018, 2019, 2020, 2021, 2022],
    "sales": [100, 120, 150, 130, 160],
})

# 创建 Altair 图表
create_altair_chart(data, "year", "sales", "line", "Sales Over Time")

2.5 Bokeh

• 优点:
  • 交互性：Bokeh 生成的图表是高度交互的，用户可以进行缩放、平移、选择等操作。
  • 大数据集：Bokeh 擅长处理大规模数据集的可视化。
  • Web 部署：Bokeh 可以生成独立的 HTML 文件，也可以嵌入到 Web 应用中。
  • Pythonic API：Bokeh 的 API 设计符合 Python 风格，易于学习和使用。
• 缺点:
  • 学习曲线：相对于 Matplotlib，Bokeh 的学习曲线稍陡峭。
  • 定制化：对于非常复杂的定制化需求，可能不如 D3.js 灵活。
• 代码示例:

from bokeh.plotting import figure, show, output_file
import pandas as pd
def create_bokeh_line_chart(data, x_field, y_field, title):
    """使用 Bokeh 创建折线图。"""

    # output_file("line_chart.html")  # 指定输出文件名（可选）

    p = figure(title=title, x_axis_label=x_field, y_axis_label=y_field) # 创建画布

    # 添加折线
    p.line(data[x_field], data[y_field], line_width=2)

    show(p)  # 显示图表
    # 或者 output_file("xxx.html")
    #      save(p)

# 示例数据:
data = pd.DataFrame({
    "year": [2017, 2018, 2019, 2020, 2021, 2022],
    "sales": [80, 100, 125, 110, 140, 165]
})

create_bokeh_line_chart(data, 'year', 'sales', "年度销售额")

3. 基于 Web 前端技术

如果需要高度定制化的可视化效果，或者希望将可视化图表直接嵌入到 Web 应用中，可以考虑使用 Web 前端技术。

3.1. HTML/CSS/JavaScript

• 优点：

  • 最灵活的可视化方案，可以实现任何想要的效果。
  • 可以与 Web 应用无缝集成。

• 缺点：

  • 需要掌握 HTML、CSS 和 JavaScript 等前端技术。
  • 开发成本较高，需要手动编写大量的代码。
  • 对于复杂图表，代码可能难以维护。

• 代码示例（非常简化的示例）：

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart Example</title>
</head>
<body>
    <div id="chart"></div>

    <script>
        // 假设数据已经通过某种方式传递到 JavaScript 中
        const data = {
            "North America": 1200000,
            "Europe": 950000,
            "Asia": 800000,
        };

        const chartDiv = document.getElementById("chart");

        for (const region in data) {
            const bar = document.createElement("div");
            bar.style.width = (data[region] / 1200000) * 100 + "%"; // 简单的比例计算
            bar.style.height = "30px";
            bar.style.backgroundColor = "steelblue";
            bar.style.marginBottom = "5px";
            bar.textContent = `${region}: ${data[region]}`;
            chartDiv.appendChild(bar);
        }
    </script>
</body>
</html>

3.2. JavaScript 可视化库

为了简化 Web 可视化的开发，可以使用 JavaScript 可视化库。

3.2.1. ECharts

• 优点：

  • 百度开源的，功能强大、配置灵活的 JavaScript 图表库。
  • 支持多种图表类型，包括地图、关系图、雷达图等。
  • 可以生成各种炫酷的动画效果。
  • 有丰富的文档和示例可供参考。
  • 国内社区活跃，容易找到解决方案。

• 缺点：

  • 学习曲线比 Chart.js 陡峭。
  • 对于非常复杂的定制化需求，可能不如 D3.js 灵活。

• 代码示例 (需要引入 ECharts 的 js 文件):

<!DOCTYPE html>
<html>
<head>
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

3.2.2. D3.js

• 优点：

  • 底层、灵活的 JavaScript 库，可以创建高度定制化的可视化。
  • 提供了强大的数据操作和转换功能。
  • 可以实现各种复杂的交互效果。

• 缺点：

  • 学习曲线非常陡峭，需要掌握较多的 Web 前端知识。
  • 开发成本较高，需要编写大量的代码。
  • 不适合创建简单的图表。

• 代码示例（非常简化的示例）：

  D3.js的学习曲线比较陡峭，因此这里提供一个非常简单的例子。实际应用中，通常会结合SVG使用。

<!DOCTYPE html>
<html>
<head>
  <title>D3.js Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <div id="chart"></div>

  <script>
    const data = [10, 20, 30, 40, 50];

    d3.select("#chart")
      .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      .style("width", (d) => d + "px")
      .style("height", "20px")
      .style("background-color", "steelblue")
      .style("margin", "5px")
      .text((d) => d);

  </script>
</body>
</html>

3.2.3. Chart.js

• 优点：

  • 简单易用的 JavaScript 图表库，适用于创建常见图表。
  • 轻量级，加载速度快。
  • 有良好的文档和社区支持。

• 缺点：

  • 功能相对简单，不支持一些高级图表类型。
  • 定制化能力有限。

• 代码示例（需要引入 Chart.js 的 js 文件）：

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

4. 集成式 BI 工具

如果不想自己编写代码，或者需要更强大的数据分析和可视化功能，可以考虑使用集成式 BI 工具。

• Tableau: 商业 BI 工具，提供强大的可视化功能和交互式仪表盘。
• Power BI: Microsoft 的商业 BI 工具，提供类似 Tableau 的功能。
• 其他 BI 工具： 还有许多其他的商业和开源 BI 工具，例如 Qlik Sense, Looker, Superset 等，都提供可视化功能。

这些工具通常提供以下功能：

• 数据连接： 可以连接各种数据源，例如数据库、Excel 文件、云服务等。
• 数据准备： 可以进行数据清洗、转换、聚合等操作。
• 可视化： 提供多种图表类型，支持拖拽式操作，可以轻松创建各种图表。
• 交互式仪表盘： 可以将多个图表组合成交互式仪表盘，方便用户探索数据。
• 报表生成： 可以生成各种报表，并导出为 PDF、Excel 等格式。
• 自然语言查询（部分工具）： 支持使用自然语言提问，自动生成图表和报表。

5. 专门的 GenBI 可视化组件或库

目前，专门为 GenBI 场景设计的可视化组件或库还比较少，但随着 GenBI 技术的发展，可能会出现更多相关的工具。这些工具可能会提供以下特性：

• 与 LLM 更好的集成： 能够更好地处理 LLM 生成的中间表示（例如，逻辑形式、抽象语法树），并将其转换为可视化结果。
• 自动选择图表类型： 能够根据数据的类型和用户的查询意图，自动选择最合适的图表类型。
• 自然语言交互： 支持使用自然语言对图表进行调整和修改。
• 可解释性： 能够解释图表的生成过程，帮助用户理解数据的含义。

6. 方案选择建议

选择哪种 GenBI 可视化方案取决于具体的需求和场景：

• 简单、快速的可视化： 如果只需要生成简单的静态图表，可以使用 Matplotlib 或 Seaborn。
• 交互式可视化： 如果需要生成可在网页上交互的图表，可以使用 Plotly、Altair 或 Bokeh。
• 高度定制化的可视化： 如果需要高度定制化的可视化效果，可以使用 D3.js 或 ECharts。
• Web 应用集成： 如果需要将可视化图表嵌入到 Web 应用中，可以使用 JavaScript 可视化库或直接生成 HTML/CSS/JavaScript 代码。
• 无需编写代码： 如果不想自己编写代码，或者需要更强大的数据分析和可视化功能，可以使用集成式 BI 工具。
• GenBI 特定需求： 如果需要与 LLM 更好的集成、自动选择图表类型、自然语言交互等 GenBI 特定功能，可以关注专门的 GenBI 可视化组件或库。