资讯专栏INFORMATION COLUMN

JsChart组件使用

番茄西红柿 / 522人阅读

摘要:设置曲线图的轴值,或柱状图的轴值,对饼图无效,默认是。设置柱状图边框宽度,只对柱状图有效。设置柱状图矩形间距,由此来控制柱状图的宽度,值为之间的整数,默认是。设置柱状图矩形值的字体大小,默认自定义生产元素的前缀,默认是,此值一般不用修改。

JsChart是什么?

JSChart能够在网页上生成图标,常用于统计信息,十分好用的一个JS组件。

使用JsChart

一。导入jscharts.js
二。编写jscharts.jsp测试页面

1.下载JScharts库
从官网下载JScharts库,我们使用的是压缩包里面的jscharts.js文件。它大约150KB。

使用JScharts库

在网页文件(如.html或.jsp)包含JScharts库。

定义容器

要在网页文件上显示JScharts生成的图像,需要把此图像放入网页容器。此网页容器我们通常用

标签来定义,而且必须强制性地为此DIV元素指定唯一的ID值。比如:

这里将用来显示图形报表

注意:此DIV容器内的内容都会被JScharts图像所替代。

显示JScharts图像

下面,我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据,我们可以用JavaScript数组来提供数据,数组中的每个元素都是由2个元素所组成


5.使用详细说明


    
这里将用来显示图形报表

统计指定时间段向各个供应商的采购金额

使用selectsupplier.jsp

action:
@Resource
    private AccountRecordsService accountRecordsService;

    @RequestMapping("/selectSupplier")
    @ResponseBody
    public Object selectSupplier(String start,String end){
        System.out.println("start:"+ start+"||end:"+end);
        Map paramMap =new HashMap();
        paramMap.put("start", start);
        paramMap.put("end", end);

        return accountRecordsService.selectSupplier(paramMap);
    }

public interface AccountRecordsService extends BaseService {
    List> selectSupplier(Map paramMap);
}

@Service("accountRecordsService")
public class AccountRecordsServiceImpl extends BaseServiceImpl
        implements AccountRecordsService {

    @Override
    public List> selectSupplier(Map paramMap) {
        // TODO Auto-generated method stub
        return accountRecordsMapper.selectSupplier(paramMap);
    }

}

public interface AccountRecordsMapper extends BaseMapper {
    
    List> selectSupplier(Map paramMap);
   
}
  

select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplier.sup_id where ar_date >"2014-01-01" and ar_date<="2015-08-08" and ar_bus_type="bo" group by sup_name
如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章,想要获取更多的Java资源的同学,可以关注微信公众号:Java3y

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115744.html

相关文章

  • JsChart组件使用

    摘要:设置曲线图的轴值,或柱状图的轴值,对饼图无效,默认是。设置柱状图边框宽度,只对柱状图有效。设置柱状图矩形间距,由此来控制柱状图的宽度,值为之间的整数,默认是。设置柱状图矩形值的字体大小,默认自定义生产元素的前缀,默认是,此值一般不用修改。 JsChart是什么? JSChart能够在网页上生成图标,常用于统计信息,十分好用的一个JS组件。 使用JsChart 一。导入jscharts....

    vslam 评论0 收藏0
  • Java3y文章目录导航

    摘要:前言由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 前言 由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 由于更新比较频繁,因此隔一段时间才会更新目录导航哦~想要获取最新原创的技术文章欢迎关注我的公众号:Java3y Java3y文章目录导航 Java基础 泛型就这么简单 注解就这么简单 Druid数据库连接池...

    KevinYan 评论0 收藏0
  • vue学习笔记(三)

    摘要:直接创建组件使用标签名组件模板,根据组件构造器来创建组件。相应的,实例也被称为父组件。而且不允许子组件直接修改父组件中的数据,强制修改会报错。 一、组件 (一)什么是组件 组件(Component)是 Vue.js最强大的功能之一。组件可以扩展 HTML元素,封装可重用的代码组件是自定义元素(对象)。 (二)创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词,例如:。 1、使用...

    fsmStudy 评论0 收藏0
  • vue学习笔记(三)

    摘要:直接创建组件使用标签名组件模板,根据组件构造器来创建组件。相应的,实例也被称为父组件。而且不允许子组件直接修改父组件中的数据,强制修改会报错。 一、组件 (一)什么是组件 组件(Component)是 Vue.js最强大的功能之一。组件可以扩展 HTML元素,封装可重用的代码组件是自定义元素(对象)。 (二)创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词,例如:。 1、使用...

    zsirfs 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<