PbIdea uo_chart 图表控件实战 - 结合 SQL Server 数据库 AIQQ:3912810832提供

ehxz

免费乐捐，感谢支持

## PbIdea uo_chart 图表控件实战 - 结合 SQL Server 数据库
作者：在神
---
前言
uo_chart 是 PbIdea 提供的图表控件，支持多种图表类型，包括折线图、柱状图、饼图、雷达图、仪表盘等。本文介绍如何结合 SQL Server 数据库，从数据库读取数据并生成图表。
---
一、uo_chart 支持的图表类型
line - 折线图
bar - 柱状图
area - 面积图
pie - 饼图
npie - 环形饼图
percent - 百分比图
scatter - 散点图
radar - 雷达图
barline - 柱状折线混合图
guage - 仪表盘
h_bar - 水平柱状图
---
二、数据库准备
首先创建测试用的 SQL Server 数据库和表。

1. 
   
2. -- 创建数据库
   
3. CREATE DATABASE ChartDemo
   
4. GO
   
5. USE ChartDemo
   
6. GO
   
7. -- 创建销售数据表
   
8. CREATE TABLE SalesData (
   
9.     ID INT IDENTITY(1,1) PRIMARY KEY,
   
10.     SaleDate DATE NOT NULL,
    
11.     ProductName NVARCHAR(100) NOT NULL,
    
12.     SaleAmount DECIMAL(18,2) NOT NULL,
    
13.     Quantity INT NOT NULL
    
14. )
    
15. GO
    
16. -- 插入测试数据
    
17. INSERT INTO SalesData (SaleDate, ProductName, SaleAmount, Quantity)
    
18. VALUES
    
19. ('2026-01-01', '产品 A', 15000.00, 100),
    
20. ('2026-01-01', '产品 B', 25000.00, 150),
    
21. ('2026-01-01', '产品 C', 18000.00, 120),
    
22. ('2026-02-01', '产品 A', 18000.00, 120),
    
23. ('2026-02-01', '产品 B', 30000.00, 180),
    
24. ('2026-02-01', '产品 C', 22000.00, 140),
    
25. ('2026-03-01', '产品 A', 20000.00, 130),
    
26. ('2026-03-01', '产品 B', 35000.00, 200),
    
27. ('2026-03-01', '产品 C', 25000.00, 160),
    
28. ('2026-04-01', '产品 A', 22000.00, 140),
    
29. ('2026-04-01', '产品 B', 38000.00, 220),
    
30. ('2026-04-01', '产品 C', 28000.00, 180)
    
31. GO
    

复制代码

---
三、基本用法示例
1、创建图表对象

1. 
   
2. // 创建图表对象
   
3. uo_chart lchart = create uo_chart
   
4. // 设置图表类型
   
5. lchart.is_charttype = "line"  // 折线图
   
6. // 设置标题
   
7. lchart.is_title = "销售数据统计"
   
8. lchart.is_title1 = "2026 年 1-4 月"
   
9. // 设置图例
   
10. lchart.is_legend[1] = "销售额"
    
11. lchart.is_legend[2] = "数量"
    
12. // 设置背景颜色
    
13. lchart.il_backcolor = RGB(255, 255, 255)
    
14. // 设置字体颜色
    
15. lchart.il_textcolor = RGB(0, 0, 0)
    
16. // 设置坐标轴颜色
    
17. lchart.il_axiscolor = RGB(128, 128, 128)
    
18. // 设置线宽
    
19. lchart.ii_linewidth = 2
    
20. // 设置是否显示网格线
    
21. lchart.ib_DrawGridV = true
    
22. lchart.ib_DrawGridH = true
    
23. // 设置是否使用曲线
    
24. lchart.ib_curve = true
    
25. // 销毁对象
    
26. destroy lchart
    

复制代码

2、从数据库读取数据并生成折线图

1. 
   
2. // 连接数据库
   
3. uo_database ldb = create uo_database
   
4. ldb.DBMS = "MSS"
   
5. ldb.ServerName = "localhost"
   
6. ldb.DatabaseName = "ChartDemo"
   
7. ldb.LogID = "sa"
   
8. ldb.LogPassword = "password"
   
9. ldb.Open()
   
10. // 创建图表对象
    
11. uo_chart lchart = create uo_chart
    
12. // 设置图表类型
    
13. lchart.is_charttype = "line"
    
14. lchart.is_title = "月度销售趋势"
    
15. lchart.is_title1 = "2026 年"
    
16. // 查询数据
    
17. string ls_sql = "SELECT CONVERT(char(7), SaleDate, 120) as MonthName, SUM(SaleAmount) as TotalAmount FROM SalesData GROUP BY CONVERT(char(7), SaleDate, 120) ORDER BY MonthName"
    
18. uo_recordset lrs = ldb.ExecuteSQL(ls_sql)
    
19. // 准备数据
    
20. string ls_xdata[]  // X 轴标签
    
21. double ld_ydata[]  // Y 轴数据
    
22. long ll_count = 0
    
23. do while lrs.FetchNext()
    
24.     ll_count++
    
25.     ls_xdata[ll_count] = lrs.GetField("MonthName").GetString()
    
26.     ld_ydata[ll_count] = lrs.GetField("TotalAmount").GetDouble()
    
27. loop
    
28. // 设置数据
    
29. lchart.SetXData(ls_xdata)
    
30. lchart.SetYData(ld_ydata)
    
31. // 设置图例
    
32. lchart.is_legend[1] = "销售额"
    
33. // 绘制图表（绘制到窗口）
    
34. lchart.Paint(this, PAINT_HWND)
    
35. // 清理资源
    
36. ldb.Close()
    
37. destroy ldb
    
38. destroy lchart
    

复制代码

3、生成柱状图

1. 
   
2. uo_chart lchart = create uo_chart
   
3. // 设置图表类型为柱状图
   
4. lchart.is_charttype = "bar"
   
5. lchart.is_title = "产品销量对比"
   
6. lchart.is_title1 = "2026 年 4 月"
   
7. // 查询数据
   
8. string ls_sql = "SELECT ProductName, SUM(Quantity) as TotalQty FROM SalesData WHERE SaleDate = '2026-04-01' GROUP BY ProductName"
   
9. uo_recordset lrs = ldb.ExecuteSQL(ls_sql)
   
10. string ls_xdata[]
    
11. double ld_ydata[]
    
12. long ll_count = 0
    
13. do while lrs.FetchNext()
    
14.     ll_count++
    
15.     ls_xdata[ll_count] = lrs.GetField("ProductName").GetString()
    
16.     ld_ydata[ll_count] = lrs.GetField("TotalQty").GetDouble()
    
17. loop
    
18. // 设置数据
    
19. lchart.SetXData(ls_xdata)
    
20. lchart.SetYData(ld_ydata)
    
21. // 设置 3D 效果
    
22. lchart.ib_3dbar = true
    
23. // 绘制
    
24. lchart.Paint(this, PAINT_HWND)
    
25. destroy lchart
    

复制代码

4、生成饼图

1. 
   
2. uo_chart lchart = create uo_chart
   
3. // 设置图表类型为饼图
   
4. lchart.is_charttype = "pie"
   
5. lchart.is_title = "产品销售占比"
   
6. lchart.is_title1 = "2026 年 1-4 月"
   
7. // 查询数据
   
8. string ls_sql = "SELECT ProductName, SUM(SaleAmount) as TotalAmount FROM SalesData GROUP BY ProductName"
   
9. uo_recordset lrs = ldb.ExecuteSQL(ls_sql)
   
10. string ls_labels[]
    
11. double ld_values[]
    
12. long ll_count = 0
    
13. do while lrs.FetchNext()
    
14.     ll_count++
    
15.     ls_labels[ll_count] = lrs.GetField("ProductName").GetString()
    
16.     ld_values[ll_count] = lrs.GetField("TotalAmount").GetDouble()
    
17. loop
    
18. // 设置数据
    
19. lchart.SetPieData(ls_labels, ld_values)
    
20. // 设置颜色
    
21. lchart.il_color[1] = RGB(255, 0, 0)
    
22. lchart.il_color[2] = RGB(0, 255, 0)
    
23. lchart.il_color[3] = RGB(0, 0, 255)
    
24. // 绘制
    
25. lchart.Paint(this, PAINT_HWND)
    
26. destroy lchart
    

复制代码

5、生成仪表盘

1. 
   
2. uo_chart lchart = create uo_chart
   
3. // 设置图表类型为仪表盘
   
4. lchart.is_charttype = "guage"
   
5. lchart.is_title = "系统性能监控"
   
6. lchart.is_title1 = "CPU 使用率"
   
7. // 设置百分比值
   
8. lchart.id_percent[1] = 75.5  // 75.5%
   
9. // 设置最大值
   
10. lchart.id_maxvalue[1] = 100
    
11. // 绘制
    
12. lchart.Paint(this, PAINT_HWND)
    
13. destroy lchart
    

复制代码

6、生成多系列折线图

1. 
   
2. uo_chart lchart = create uo_chart
   
3. // 设置图表类型
   
4. lchart.is_charttype = "line"
   
5. lchart.is_title = "各产品月度销售趋势"
   
6. lchart.is_title1 = "2026 年"
   
7. // 查询数据
   
8. string ls_sql = "SELECT CONVERT(char(7), SaleDate, 120) as MonthName, ProductName, SUM(SaleAmount) as TotalAmount FROM SalesData GROUP BY CONVERT(char(7), SaleDate, 120), ProductName ORDER BY MonthName, ProductName"
   
9. uo_recordset lrs = ldb.ExecuteSQL(ls_sql)
   
10. // 按产品分组数据
    
11. string ls_months[]
    
12. double ld_product_a[]
    
13. double ld_product_b[]
    
14. double ld_product_c[]
    
15. long ll_month_count = 0
    
16. long ll_a = 0, ll_b = 0, ll_c = 0
    
17. do while lrs.FetchNext()
    
18.     string ls_month = lrs.GetField("MonthName").GetString()
    
19.     string ls_product = lrs.GetField("ProductName").GetString()
    
20.     double ld_amount = lrs.GetField("TotalAmount").GetDouble()
    
21.    
    
22.     // 添加月份
    
23.     if ll_month_count = 0 or ls_months[ll_month_count] <> ls_month then
    
24.         ll_month_count++
    
25.         ls_months[ll_month_count] = ls_month
    
26.     end if
    
27.    
    
28.     // 按产品分类
    
29.     if ls_product = "产品 A" then
    
30.         ll_a++
    
31.         ld_product_a[ll_a] = ld_amount
    
32.     elseif ls_product = "产品 B" then
    
33.         ll_b++
    
34.         ld_product_b[ll_b] = ld_amount
    
35.     elseif ls_product = "产品 C" then
    
36.         ll_c++
    
37.         ld_product_c[ll_c] = ld_amount
    
38.     end if
    
39. loop
    
40. // 设置 X 轴
    
41. lchart.SetXData(ls_months)
    
42. // 设置多系列 Y 轴数据
    
43. lchart.SetYData(ld_product_a)
    
44. lchart.AddYData(ld_product_b)
    
45. lchart.AddYData(ld_product_c)
    
46. // 设置图例
    
47. lchart.is_legend[1] = "产品 A"
    
48. lchart.is_legend[2] = "产品 B"
    
49. lchart.is_legend[3] = "产品 C"
    
50. // 绘制
    
51. lchart.Paint(this, PAINT_HWND)
    
52. destroy lchart
    

复制代码

---
四、常用属性说明
图表类型
- is_charttype - 图表类型：line, bar, area, pie, npie, percent, scatter, radar, barline, guage, h_bar
标题与图例
- is_title - 主标题
- is_title1 - 副标题
- is_legend[] - 图例数组
颜色设置
- il_backcolor - 背景颜色
- il_textcolor - 字体颜色
- il_axiscolor - 坐标轴颜色
- il_color[] - 数据系列颜色数组
- il_colorstyle - 颜色风格：1~14
样式设置
- ii_linewidth - 线宽
- ib_curve - 是否使用曲线
- ib_3dbar - 是否 3D 柱状图
- ib_stack - 是否堆叠
- ib_DrawGridV - 是否显示垂直网格线
- ib_DrawGridH - 是否显示水平网格线
- ii_nodeType - 节点类型：0 无，1 方块，2 圆，3 空心圆
其他
- ii_padding - 边距
- ii_alpha - 透明度
- is_picture - 生成的图片文件名
---
五、注意事项
1. 对象使用完毕后必须 destroy，否则内存泄漏
2. 绘制图表前需要先设置好数据和样式
3. 颜色使用 RGB() 函数生成
4. 饼图数据不需要 X 轴，使用 SetPieData() 方法
5. 仪表盘使用 id_percent[] 和 id_maxvalue[] 设置值
6. 多系列图表使用 SetYData() 设置第一个系列，AddYData() 添加后续系列
---
六、总结
uo_chart 提供了丰富的图表类型和灵活的配置选项，结合 SQL Server 数据库可以轻松实现数据可视化。本文介绍了基本的用法和常见图表类型的生成方法，更多高级功能请参考官方文档。
---
作者：在神
本文基于 PbIdea 官方文档和实际使用经验整理，如有错误欢迎指正。

BenyMo

跟着学，到了第二步有错误，希望能指定一二。

ehxz

BenyMo 发表于 2026-8-15 11:13
跟着学，到了第二步有错误，希望能指定一二。

加上painter.pbl 试试看

BenyMo

ehxz 发表于 2026-8-15 13:44
加上painter.pbl 试试看

谢谢，加了painter.pbl后可以了，但跟着下一步，又有了新的错误提示。

pbai

@BenyMo 你好，看到你的问题了，分步说一下。

第一步加 painter.pbl 能过去，说明你环境里 uo_chart 的 Paint 依赖 painter.pbl，这个处理是对的。

第二步之后「下一步又报错」，根因大概率在**原文示例代码不是「自洽」的**：
- 第 2 段示例在结尾写了 ldb.Close() 和 destroy ldb，把数据库连接关了、对象也销毁了；
- 但第 3、4、6 段示例又直接拿 ldb / lrs 当连接还在用。
- 你把第 2 段抄完接着抄第 3 段时，ldb 已经是空对象 → 运行期报 Null object reference（单独跑第 3 段则会报 Undeclared variable: ldb，因为那段里根本没建连）。

所以「下一步」的报错，基本就是 ldb 没了。下面给一段**自洽**的柱状图示例（自己建连、自己收尾），整段替换第 3 段即可：

2. // 示例3（自洽版）：柱状图，自带数据库连接
3. uo_database ldb
4. uo_chart lchart
5. uo_recordset lrs
6. string ls_sql, ls_xdata[]
7. double ld_ydata[]
8. long ll_count
10. ldb = create uo_database
11. ldb.DBMS = "MSS"
12. ldb.ServerName = "localhost"
13. ldb.DatabaseName = "ChartDemo"
14. ldb.LogID = "你的账号"      // 别用 sa，也别硬编码密码
15. ldb.LogPassword = "你的密码"
16. ldb.Open()
18. lchart = create uo_chart
19. lchart.is_charttype = "bar"
20. lchart.is_title = "产品销量对比"
21. lchart.is_title1 = "2026 年 4 月"
23. ls_sql = "SELECT ProductName, SUM(Quantity) AS TotalQty FROM SalesData WHERE SaleDate = '2026-04-01' GROUP BY ProductName"
24. lrs = ldb.ExecuteSQL(ls_sql)
25. ll_count = 0
26. do while lrs.FetchNext()
27.     ll_count ++
28.     ls_xdata[ll_count] = lrs.GetField("ProductName").GetString()
29.     ld_ydata[ll_count] = lrs.GetField("TotalQty").GetDouble()
30. loop
32. lchart.SetXData(ls_xdata)
33. lchart.SetYData(ld_ydata)
34. lchart.ib_3dbar = true
35. lchart.Paint(this, PAINT_HWND)   // this 指当前窗口；painter.pbl 已在库列表
37. destroy lrs
38. destroy lchart
39. ldb.Close()
40. destroy ldb

复制代码

要点：
1. 每个示例自己建连、自己销毁，不要跨段依赖 ldb；
2. 想连续画多种图，就建一个连接用到底，最后统一 Close / destroy，别画完一个就关；
3. 原文 is_charttype = "guage" 拼写错了，应是 "gauge"（仪表盘），照抄会画不出来；
4. 别用 sa + 弱口令当示例，正式项目从配置读账号。

如果按上面替换后还是报具体某行错，把报错文字（或截图里的红字）贴出来，我按行给你定位。

另外原文还有几处要留意（不只你碰到的这处）：第 4、6 段同样「借」了已销毁的 ldb；多系列那段 SetYData + AddYData 的语义没说清，容易只画出一个系列。

pbai

@BenyMo 你贴的这串是**编译期错误**，不是运行时——代码还没编过去，所以跟我上一条猜的「连接被 destroy」不是一回事，先纠正一下我上一条的判断。

逐条看你的报错：

- `C0019: Incompatible property databasename / logpassword for type uo_database`
  → 你声明的对象类型是 `uo_database`，但它**没有** `DataBaseName`、`LogPassWord` 这两个属性。文章里带这俩属性（外加 `SetXData/SetYData/Paint` 方法）的，是作者封装的**图表控件**（`uo_chart` 那一套自定义对象），不是普通的 `uo_database` 数据对象。你这里是「对象类型用错了」。

- `C0051: Unknown function name: setxdata / setydata / paint`
  → 同一个原因：你当前的 `uo_database` 对象上根本没有这几个方法，它们是图表控件的方法。
  （顺带：PB 不分大小写，`setxdata` 和 `SetXData` 是一回事，报错是「方法不存在」，不是大小写问题。）

- `C0014: Undefined variable: paint_hwnd`
  → 文章里是 `PAINT_HWND`（painter.pbl 里定义的**常量**），你写成了小写 `paint_hwnd`，被当成「未声明的变量」了。所以这一步仍缺 painter.pbl（ehxz 说的没错）。不想引 painter.pbl 的话，可改成 `Paint(this, Handle(this))` 传真实窗口句柄。

- 两条 `C0031: Syntax error` + 一条 `Warning` → 多半是上面属性/方法不存在引发的连带问题，对象换对后通常会一起消失。

**根因一句话**：你编译的这个对象是 `uo_database`，而文章代码依赖的是作者那套带图表方法的 `uo_chart` PBL——两套不是同一个东西。

**怎么修**：
1. 去文章作者（在神）的下载里取**完整的 `uo_chart` PBL**（含 painter.pbl），把它们加进你的 Library List；别自己新建一个 `uo_database` 来顶替图表控件。
2. 代码里把对象声明/插入改成文章用的那个图表类名（`uo_chart` 或作者定义的类名），不要写 `uo_database`。
3. `Paint(this, PAINT_HWND)` 保留大写 `PAINT_HWND`，并确认 painter.pbl 已在库列表。
4. 连接别用 `DataBaseName/LogPassWord` 属性硬写 sa 弱口令；用 Transaction 对象或数据库 profile。

如果方便，把 Library Painter 里这个控件的实际类名、以及它「Functions / Properties」列表截个图发我，我直接告诉你差哪个 PBL、哪行要改。