如何用js统计图表FineReport做图表

 时间:2026-02-14 20:29:44

1、 图表制作流程

图表制作流程如下图:

如何用js统计图表FineReport做图表

2、该章节我们以下图所示的柱形图为例,展示各个地区产品类型的销量情况,为大家简单的介绍下图表的制作流程。

如何用js统计图表FineReport做图表

3、准备数据

在制作图表前,需要先定义图表的数据来源。

在上面的图表制作流程中提到数据来源有两种类型,数据集数据源和单元格数据源,本章节使用数据集作为数据源,如果需要使用单元格数据源。

新建工作薄,添加数据集,SQL语句为SELECT * FROM [销量],使用销量表作为图表的数据来源。

4、插入图表并选择图表类型

图表有两种插入方式:单元格图表与悬浮图表,该例中我们以悬浮图表为例,单元格图表的插入方式请查看单元格图表。

点击工具栏中的插入>悬浮元素>插入图表,弹出图表向导,选择图表类型如柱形图,如下图:

注:插入图表和选择图表类型一般性是在一起完成的。

如何用js统计图表FineReport做图表

5、 定义图表数据

选择完图表类型后,点击确定,返回报表主体界面,选中悬浮图表,在报表主体右侧上方的图表属性表中设置图表属性,选择图表属性表-数据,设置柱形图的数据,如下图:

如何用js统计图表FineReport做图表

6、设置图表数据,首先要选择数据来源,前面我们新建了一个数据集ds1,这张图表的数据来源于数据集数据,选择好数据来源之后,为分类轴、系列名、系列值绑定数据集中的字段,用图表来展示数据集中的数据。

分类轴:就是图表的横轴,即x轴,表示数据是按照什么分类显示的;

系列名:系列就是图表的纵轴,即y轴,系列名称表示每个分类下数据是按照什么顺序显示的;

系列值:就是每个系列的值;

汇总方式:对系列值的计算方式。

7、图表样式设置

标题设置

选中图表,在设计器右侧上方会出现图表属性表,选择图表属性表-样式>标题,增加图表标题为:地区产品销量,如下图:

如何用js统计图表FineReport做图表

8、系列标签设置

选择图表属性表-样式>标签,勾选标签,显示出每个系列的值:

如何用js统计图表FineReport做图表

9、保存模板

保存模板,预览便可以看到效果如上图。

  • 怎么用java统计图表FineReport做图表
  • 怎么用html5 图表FineReport做图表?
  • js统计图表工具FineReport如何设置图表缩放
  • 图表插件FineReport:图表数据
  • js统计图表工具FineReport如何制作轴逆序图表
  • 热门搜索
    碟中谍6什么时候上映 浩的意思 遑论是什么意思 pcb是什么意思 什么面膜比较好 au750是什么意思 吃柿子有什么好处 上海有什么好玩的景点 有什么励志的电影 alex是什么意思