Lopwon Hub：Chart 使用文档

版本型号：Lopwon Hub · Chart（数据可视化）
适用程序：Typecho
皮肤类型：插件
插件作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/attachment/4008/
官方演示：数据可视化，文内可视化数据图表示例

我要购买：前往

插件说明

Chart（数据可视化）依托 Lopwon Hub 插件运行，适用于在文内展示可视化的数据图表，主要功能：

1. 可将数据渲染为折线图、柱状图、饼形图、雷达图；

2. 可对博客的文章类型（分类）和标签云进行可视化图表呈现；

3. 相同的数据，可以便捷的在折线图、柱状图、饼形图、雷达图之间切换；

4. 组件可配置，色调可定义等；

插件更新

2025年06月13日 发布 Lopwon Hub · Chart

使用方法

A 部署文件

1. 将压缩包里的文件夹 LopwonHub 及其内部的所有文件，上传至目录 usr/plugins 中。

2. 后台》控制台》插件，找到 Lopwon Hub 并启用。

B 调用插件

打开 post.php 文件，找到输出文章内容的 $this->content; 代码，替换为：

    $content = $this->content; // 将文章内容赋值到变量 $content
    $content = Typecho_Plugin::factory('Content')->LopwonHub($content); // 将变量 $content 传递给插件做处理
    echo $content; // 输出插件处理后的文章内容

重要：如果已经调用过 Typecho_Plugin::factory('Content')->LopwonHub($content); 则无需重复使用。

如果你在用的主题已经对输出文章的内容做了自定义，那么只需要将输出文章的内容变量传递给所调用的插件，进而由插件做最后的文章内容输出。

E 异步加载（可选项）

本案依赖 JavaScript，如果调用插件的位置涉及异步加载，可动态引入以下脚本（请自行研究），反之可无视：

    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.echarts.min.js"></script>
    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.wordcloud.min.js"></script>
    <script src="https://www.example.com/usr/plugins/LopwonHub/static/js/lopwon.hub.chart.js"></script>
    <script>HubChart.autoInit();</script>

    // 注意：以上调用，将只能使用默认配置，同时，插件 Lopwon Hub · Chart 的设置项也将失效。

请把以上代码中 https://www.example.com 替换为你的链接。

D 配置插件

后台》控制台》插件，找到 Lopwon Hub 并设置，找到本案（设置），根据提示依喜好设置即可。

E 使用插件

后台》管理》文章（或独立页面），打开需要使用（数据图表）的文章（或独立页面），除以下提到的事项外，其余正常操作即可。

一、新增自定义字段。

新增自定义字段，字段名称必须填入以 ec_ 作为前缀的自定义名称，乱填无效，如：

    ec_a
    ec_love
    ec_888
    ec_自定义名称

二、输入字段值。

1. 请严格按照以下格式要求输入字段值，才能在前台正确输出：

    图表类型,图表标题,数据单位
    图表类目A,图表类目B,图表类目C
    统计项目甲|项目甲的类目A数据,项目甲的类目B数据,项目甲的类目C数据
    统计项目乙|项目乙的类目A数据,项目乙的类目B数据,项目乙的类目C数据
    统计项目丙|项目丙的类目A数据,项目丙的类目B数据,项目丙的类目C数据

3. 以上格式有上下左右的先后顺序要求：

① 第一行：第一个元素配置图表类型；第二个元素配置图表标题；第三个元素配置数据单位，元素之间使用半角逗号隔开。

② 第二行：配置图表的类目，在二维图表中，通常为横坐标（X轴）的类目名称，名称之间使用半角逗号隔开。

③ 第三行及之后的行：配置图表的项目及数据，在二维图表中，通常为纵坐标（Y轴）的项目数据，每行输出一组数据，项目名称和数据组之间使用竖线 | 隔开，数据之间使用半角逗号隔开。

④ 注意：数据组的数据个数，需要和第二行的类目数量相对应，也有先后顺序要求，见下

2. 示例：

    bar,滇西南行九天八晚,元
    第一天,第二天,第三天,第四天,第五天,第六天,第七天,第八天,第九天
    吃的|131,26,123,109,71,101,85,34,34
    住的|168,168,110,110,98,128,128,128,0
    行的|290,0,73,32,57,44,15,39,273

3. 说明，在（吃的）行中的（109）表示（第四天）的花费是：109元，其他类同。

4. 其中，图表类型有 4 个有效值，分别为：

    折线图 line
    柱形图 bar
    饼形图 pie
    雷达图 radar

5. 其中，通过更换图表类型，可以实现同一数据以不同图表类型呈现，需要注意的是，当图表类型为饼形图（pie）时，所有数据行（即第三行及之后的行）的数据将被合并统计。

三、在文章中引入字段名称。

1. 在编辑器工具栏里点击 Hub 按键，选择（数据图表），根据提示操作；

2. 如需创建多个数据图表，则继续点击（数据图表）不断新增；

3. 请将（自定义字段名称）修改为以上所添加的自定义字段名称，如下：

3. 示例：

    [chart-ec_a]
    [chart-ec_love]
    [chart-ec_888]

    [chart-cate]
    [chart-tags]

4. 其中：

① [chart-cate] 将自动输出（文章类型）图表，无需创建与之相关的字段数据；
② [chart-tags] 将自动输出（字符云图）图表，无需创建与之相关的字段数据；
③ 其他的，将对应引入各自的字段数据，输出各自的数据图表。

F 使用技巧

1. 适配样式请修改 usr/static/css/lopwon.hub.chart.css 文件，请自行研究。

2. 如何自定义图表主题？详见插件 Lopwon Hub：Chart 设置中的（图表主题）。