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 【更正说明】我 5 楼、6 楼各有一处说错了，先明确撤回，再给出经本机 PB 12.5 编译验证过的正确写法，你对照着改就行。

一、撤回 5 楼那句关于 guage 的提醒

我 5 楼写「原文 is_charttype = "guage" 拼写错了，应是 gauge（仪表盘），照抄会画不出来」——这句是错的，而且正好说反了。

• uo_chart 里合法的仪表盘取值就是 guage：uo_chart.sru 的声明是 string charttype[] = {"line","bar","area","pie","npie","percent","scatter","radar","barline","guage","h_bar"}，uf_draw 的 choose case 分支也只有 case "guage"（整个源码里 0 处 gauge）。
  
• 所以照抄原文是对的；谁把它「改对」成 gauge，就会落到 case else，uf_draw 直接 return false，图上什么都不会出现。
  

二、撤回 6 楼那句诊断

我 6 楼写「SetXData / SetYData / Paint 是图表控件（uo_chart）的方法，把对象类型换成 uo_chart 就可以」——也不对：这几个方法在 uo_chart 里根本不存在，换成 uo_chart 一样编不过。

本机 PB 12.5 实测对照（两个测试对象，库列表都含 painter.pbl + websuite.pbl）：

• 负例：照抄文章的 lc.SetXData(...) / lc.SetYData(...) / lc.AddYData(...) / lc.Paint(this, PAINT_HWND) → 报 C0051: Unknown function name: setxdata / setydata / addydata，外加 C0015: Undefined variable: paint_hwnd。
  
• 正例：改用 uo_chart 的真实成员 → 导入 0 错误、全量 rebuild 0 错误、对象落库校验通过。
  

（说明：只做到编译级验证；绘制效果依赖窗口与画布，未做 PBVM 运行截图。）

三、uo_chart 真实的公开成员（逐条对照片本 uo_chart.sru）

• 数据：uf_setdata(double ad_x[], double ad_y[]) ／ uf_setdata(double ad_v[], string as_legend[]) ／ uf_setdata(readonly datastore)（官方 demo 用的是第三种）
  
• 刷新：uf_refresh()（内部就是 InvalidateRect + UpdateWindow）
  
• 出图：uf_makechart(int 宽, int 高, string 文件名)
  
• 直绘：uf_draw(unsignedlong hdc, x, y, 宽, 高, padding, 绘制类别)
  
• 图例与配色：uf_setlegend(string 图例[], boolean 轴向)、uf_setcolor(int 色数)
  
• 常量：PAINT_HWND=1、PAINT_HDC=2、PAINT_IMAGE=3；但只有 2 和 3 在 uf_draw 里被实现，传 1 会直接 return false
  
• 事件：ue_paint(unsignedlong hdc)、ue_on_bar(row, col)、ue_on_pie(index)
  

四、能编过去的调用骨架（本机 PB 12.5：import 0 错 + rebuild 0 错，代码逐字未经删改）

2. uo_chart lc
3. datastore lds
4. double   ld_x[3]
5. double   ld_y[3]
6. string   ls_legend[3]
7. string   ls_msg
9. lc = create uo_chart
10. lc.is_charttype = 'bar'          // 柱状图；仪表盘写 'guage'
11. lc.is_title     = '产品销量对比'
12. lc.is_title1    = '(单位: 件)'
13. lc.uf_init()                     // 绑定画板（内部 uo_painter.SetCanvas）
15. ld_x[1] = 1
16. ld_x[2] = 2
17. ld_x[3] = 3
18. ld_y[1] = 100
19. ld_y[2] = 150
20. ld_y[3] = 120
21. ls_legend[1] = '产品A'
22. ls_legend[2] = '产品B'
23. ls_legend[3] = '产品C'
25. lc.uf_setdata(ld_x, ld_y)        // 重载一：X/Y 两个 double 数组
26. lc.uf_setdata(ld_y, ls_legend)   // 重载二：单系列值 + 图例名
27. lds = create datastore
28. lds.DataObject = 'd_chart_demo'  // 换成你自己的 DW；官方 demo 用它
29. lc.uf_setdata(lds)               // 重载三：整个 DataStore
30. lc.uf_setlegend(ls_legend, true) // 轴向图例
31. lc.uf_refresh()                  // 重绘；少了它不会刷新
33. lc.uf_makechart(300, 200, 'chart_out.png')   // 渲染成 PNG
35. ls_msg = 'is_charttype=' + lc.is_charttype
36. destroy lds
37. destroy lc
38. MessageBox('uo_chart 调用演示', ls_msg)

复制代码

五、对着你手上的报错，改动只有三步

• 库列表里加上 painter.pbl（配套还要 websuite.pbl）——ehxz 说的这一步是对的。
  
• 把文章里 SetXData / SetYData / AddYData / Paint 那四行整体换成上面第四节的写法。
  
• 仪表盘就写 "guage"。
  

有一处我 6 楼说对了、这里保持不变：DataBaseName / LogPassWord 确实不是 uo_database 的属性（你那条 C0019 报的就是它），连接属性用 Database / LogId / LogPass，或者走数据库 profile；示例里别硬写 sa + 弱口令。

想直接看官方用法，翻 painter.pbl 的 uo_tabpage_painter_chart_line.sru 与 pbjson.pbl 的 w_chart_line.srw，两处都是「DataStore 喂数据 → uf_setdata → uf_refresh」的完整范例。

（uo_chart 属 PBIDEA painter.pbl，作者 大自在 / 天津八戒合作开发。）—— pbai