html5图表软件FineReport中如何制作日期分类轴

来源：互联网 2023-03-16 19:06:45 167

有一种图表，他的分类轴值为年月日格式的日期，希望图表中的数据能够按照日期的大小从小到大显示。并且能够设置数据的显示单位，如以年为单位显示，或者以月为单位显示等等，下面就通过html5图表软件FineReport来简单介绍一下。

工具/原料

如下图：

这种图表我们可以使用时间坐标轴来实现。以下举例介绍：

html5图表软件FineReport中如何制作日期分类轴

数据准备

新建工作薄，添加数据集ds1，SQL语句为SELECT * from 订单，查询出所有订单信息。

直接使用这个数据集的数据，制作一张2010年1到6月的运货费统计表。

插入图表

以悬浮图表为例，点击插入>悬浮元素>插入图表，弹出图表向导，选择柱形图，点击确定。

设置图表数据

图表数据就来自于数据集数据，定义如下。

此时的图表统计的为所有年所有天的数据。

html5图表软件FineReport中如何制作日期分类轴

设置日期分类轴

选中图表，点击图表属性表-样式>坐标轴>分类轴，轴类型选择时间坐标轴，并根据需要设置时间范围及显示单位：

html5图表软件FineReport中如何制作日期分类轴

最小值：采用日历控件选择最小值，可精确到秒；

最大值：同最小值，最大值必须大于最小值，日历控件小于最小值的部分不可点击；

主要刻度单位：即图表分类轴标签是怎么显示的，刻度单位有6个，年月日时分秒，如，此设置为1个月，每个月显示一个标签，默认为该月第一天的0时0分，如上图。

注：时间坐标轴只适用于柱形图、折线图、条形图、面积图、组合图、股价图和甘特图这几种图表类型

6此文章未经许可获取自百度经验

保存并预览

保存模板，点击分页预览，即上图效果。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML