highecharts折线统计图

已于 2022-03-31 10:50:03 修改
阅读量286 收藏 1
点赞数
分类专栏： 前端 文章标签： js
于 2020-08-12 11:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43511677/article/details/107953083
版权

html部分

<script type="text/javascript" src="${ctx}/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts/highcharts-more.js"></script>


<div style="height: 100%;">
    <%--<div class="f_img"><span>实时采集数据分析</span></div>--%>
    <!-- 图表开始-->
    <div id="gdTabs" style="height: 85%">
        <div id="costChart" style="width: 100%; height: 100%"></div>
    </div>
</div>

js部分

$.ajax({
                type: "get",
                url:Config.ContextPath+'service/njgs/ssjc/realdatagather/getEchartsData',
                dataType: "json",
                success: function(result) {
                    costEcharts(result);
                    console.log(result)
                }
            });
function costEcharts(result) {

                var xydata = [];
                var xdata = [];//x轴
                $.each(result.data.yData,function(key,values){
                    xydata.push({name:key,data:values});
                });

                $.each(result.data.cData,function(key,values){
                    xdata.push(values);
                });

                var chart = Highcharts.chart('costChart', {
                    chart: {
                        marginTop: 40,
                        marginRight: 40
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: xdata,
                        axisLabel:{interval: 10}
                    },
                    yAxis: {
                        title: {
                            text: '实时采集数据分析'
                        }
                    },
                    series: xydata
                });
            }

查询数据-dao

        //获取数据
        public List getYData(Map<String,Object> searchColumn){
        //根据条件判断搜索类型
            int type=0;
            if("0".equals(searchColumn.get("gatherType"))){//按小时
                type=0;
            }else if("1".equals(searchColumn.get("gatherType"))){//按天
                type=1;
            }else if("2".equals(searchColumn.get("gatherType"))){//按月
                type=2;
            }else if("3".equals(searchColumn.get("gatherType"))){//按年
                type=3;
            }
            String indexId=searchColumn.get("indexId").toString();
            String strt=searchColumn.get("gatherDateStart").toString();
            String end=searchColumn.get("gatherDateEnd").toString();
            String strtm=searchColumn.get("gatherDateStart").toString().substring(0,7);
            String endm=searchColumn.get("gatherDateEnd").toString().substring(0,7);
            /** 先查询横坐标的值*/
            StringBuffer ssql=new StringBuffer();
            ssql.append(" SELECT DISTINCT tm.NAME,tm.ROW_ID from T_REALDATA_GATHER tr " +
                    "  LEFT JOIN T_MONITORING_POINT tm ON tr.MONITORINGPOINT_ID=tm.ROW_ID " +
                    "  LEFT JOIN T_INDEX ti on tr.INDEX_ID=ti.ROWID " +
                    "where 1=1 ");
            if(searchColumn.containsKey("indexId")){
                ssql.append(" and tr.INDEX_ID='"+searchColumn.get("indexId").toString()+"' ");//--and MONITORINGPOINT_ID='739'
            }
            if(searchColumn.containsKey("gatherDateStart")){
                ssql.append(" and to_char(tr.GATHER_TIME,'yyyy-mm-dd')>='"+searchColumn.get("gatherDateStart").toString()+"' and to_char(tr.GATHER_TIME,'yyyy-mm-dd')<='"+searchColumn.get("gatherDateEnd").toString()+"' ");
            }
            ssql.append(" ORDER BY to_number(tm.ROW_ID) ");
            JSONArray arry=DatabaseOptUtils.listObjectsBySqlAsJson(this,ssql.toString());

            List<Object[]> list =new LinkedList<Object[]>();
            //遍历每一条折线数据，添加到最终集合list 中
            if(arry.size()>0){
                for (int i = 0; i < arry.size(); i++) {
                    JSONObject jsonObject=arry.getJSONObject(i);
                    String code=jsonObject.get("rowId").toString();
                    String name=jsonObject.get("name").toString();
                    List<Object[]> l =getUnionAllSql(type,strt,end,strtm,endm,indexId,code);
                    for (int j = 0; j < l.size(); j++) {
                        Object[] o=l.get(j);
                        o[1]=code;
                        o[2]=name;
                        list.add(o);
                    }
                }
            }
            List list1=new ArrayList();
            Map<String, Double[]> map = new LinkedHashMap<String, Double[]>();

            String[] xLine={};//监测点数组
            String[] c={};//横坐标数组
            int num=24;
            int time=compareDate(strt,end,0);
            int size=0;//设置折线数据的----集合初始值大小
            if (type==0){//按小时搜索
                size=num*(time+1);//计算集合大小
            }
            if(type==1){//天
                size=(compareDate(strt,end,0)+1);
            }
            if(type==2){//月
                size=(compareDate(strt,end,1)+1);
            }
            if(type==3){//年
                size=(compareDate(strt,end,2)+1);
            }
            if(null != list && list.size() > 0) {
                int n=0;//纵坐标ntu值数组下标
                for(int i = 0; i < list.size(); i++) {
                    Object[] object = list.get(i);
                    if(map.containsKey(object[2].toString())) {//判断map数组中是否包含这个key（一条折线对应一个key）
                        Double[] cost = map.get(object[2].toString());
                        if(n<size){
                            cost[n] = Double.valueOf(object[3].toString());
                            if(c.length<size){
                                if(!Arrays.asList(c).contains(object[0].toString())){//判断数组c的元素不重复添加
                                    c = insert(c, object[0].toString());//将字符串元素，添加到c数组中
                                    xLine= insert(xLine, object[2].toString());
                                }else{
                                    c = insert(c, "");
                                    xLine= insert(xLine, "");
                                }
                            }
                        }

                        n++;
                    } else {
                        Double[] cost = new Double[size];
                        n=0;
                        cost[0] = Double.valueOf(object[3].toString());//将获取的值放入Double类型数组
                        map.put(object[2].toString(), cost);//将Double类型数组放入map中
                        if(c.length<size){
                            if(!Arrays.asList(c).contains(object[0].toString())){//判断C集合中是否包含这个key,不包含则赋值为空
                                c = insert(c, object[0].toString());
                                xLine= insert(xLine, object[2].toString());
                            }else{
                                c = insert(c, "");
                                xLine= insert(xLine, "");
                            }
                        }
                        n++;
                    }
                }
            }
            list1.add(map);//折线数据的数组map集合
            list1.add(xLine);//折线的名称--折线显示可不用
            list1.add(c);//横坐标数组
            return list1;
        }
        public  List<Object[]> getUnionAllSql(int type,String start,String end,String strtm,String endm,String indexId,String code){
            StringBuffer sql=new StringBuffer();
          //拼接sql
			--------------------------
            List<Object[]> list = (List<Object[]>)DatabaseOptUtils.listObjectsBySql(this,sql.toString());
            return list;
        }
 private  String[] insert(String[] arr, String str)
        {
            int size = arr.length;
            String[] tmp = new String[size + 1];
            System.arraycopy(arr, 0, tmp, 0, size);
            tmp[size] = str;
            return tmp;
        }
        /**
         * @param date1 需要比较的时间 不能为空(null),需要正确的日期格式
         * @param date2 被比较的时间  为空(null)则为当前时间
         * @param stype 返回值类型   0为多少天，1为多少个月，2为多少年
         * @return
         */
        public static int compareDate(String date1,String date2,int stype){
            int n = 0;

            String[] u = {"天","月","年"};
            String formatStyle = stype==1?"yyyy-MM":"yyyy-MM-dd";

            date2 = date2==null?getCurrentDate():date2;

            DateFormat df = new SimpleDateFormat(formatStyle);
            Calendar c1 = Calendar.getInstance();
            Calendar c2 = Calendar.getInstance();
            try {
                c1.setTime(df.parse(date1));
                c2.setTime(df.parse(date2));
            } catch (Exception e3) {
                System.out.println("wrong occured");
            }
            //List list = new ArrayList();
            while (!c1.after(c2)) {                     // 循环对比，直到相等，n 就是所要的结果
                //list.add(df.format(c1.getTime()));    // 这里可以把间隔的日期存到数组中 打印出来
                n++;
                if(stype==1){
                    c1.add(Calendar.MONTH, 1);          // 比较月份，月份+1
                }
                else{
                    c1.add(Calendar.DATE, 1);           // 比较天数，日期+1
                }
            }

            n = n-1;

            if(stype==2){
                n = (int)n/365;
            }
            return n;
        }

        /**
         * 得到当前日期
         * @return
         */
        public static String getCurrentDate() {
            Calendar c = Calendar.getInstance();
            Date date = c.getTime();
            SimpleDateFormat simple = new SimpleDateFormat("yyyy-MM-dd");
            return simple.format(date);

        }

数据查询-controller

/**
     * 查询  实时监测信息表echarts数据
     */
    @RequestMapping(value = "/getEchartsData", method = {RequestMethod.GET})
    public void getEchartsData(String[] field, PageDesc pageDesc, HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> searchColumn = collectRequestParameters(request);
        searchColumn.put("deletedFlag", CommonsUtil.DELETEDFLAG_NO);
        List list = realdataGatherDao.getYData(searchColumn);

        ResponseMapData resData = new ResponseMapData();
        resData.addResponseData("yData", list.get(0));
        resData.addResponseData("xData", list.get(1));
        resData.addResponseData("cData", list.get(2));

        JsonResultUtils.writeResponseDataAsJson(resData, response);
    }

效果

在这里插入图片描述

草莓不苦
关注
专栏目录
Highcharts使用指南
weixin_34037515的博客
01-24 872
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
highcharts api 中文网 折线图、曲线图、区域图、3D图、柱状图示例以及使用
为梦想放生,创造梦一样的未来！
04-17 3796
highcharts api  中文网 地址：http://www.hcharts.cn/demo/index.php?p=10&theme=skies 代码示例 $(function () { $('#container').highcharts({ title: { text: 'Monthly Aver
highcharts 折线图 饼图
C赏心悦目
09-11 245
一.折线图(以时间为x轴) 先上一张效果图 直接上代码 function graph(data) { $('#container').highcharts({ global:{ useUTC:false }, chart: { type: 'spline' }, credits:{
highcharts.js制作折线趋势图表
ICode联盟
04-08 225
下载地址 使用highcharts.js插件制作的折线图表，制作员工业绩流水情况折线图数据图表代码。 dd:
echarts(highcharts)
qq_44991374的博客
03-23 163
5分钟开始上手 官网链接 配置项 echarts 引入js <script src="echarts.min.js"></script> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 let myChart
3D图表Highcharts(3D)
07-17
用javascript编写的各类图表，包含3D特效图表，非常精致。
一款html折线统计图
02-23
【描述】：“这是一款适用于初学者学习的折线统计图” 对于初学者来说，理解并应用HTML和CSS来构建折线图可能有些挑战，但这个实例提供了一个良好的起点。它简化了过程，使学习者能够直观地看到代码与实际图形之间...
（北京版）五年级数学下册《单式折线统计图》 教案.doc
01-20
《单式折线统计图》是五年级数学下册的一个重要知识点，主要涉及统计图表的类型、特点和绘制方法。本节课的教学目标包括三个方面： 1. 学生需要理解单式折线统计图的基本概念，知道它是如何表示数据及其变化的。在...
新人教版五年级数学下册第7单元《折线统计图》教学设计.docx
09-12
4. **比较条形统计图与折线统计图**：条形统计图侧重于比较不同类别的数据量，而折线统计图则更专注于显示数据随时间的动态变化。两者各有优势，适用于不同的数据呈现需求。 5. **复式折线统计图**：当需要比较两个...
PHP中使用GD库绘制折线图 折线统计图的绘制方法
12-18
在PHP中，绘制折线图通常涉及到GD库的使用，这是一个强大的图像处理库，能够创建、编辑和输出各种格式的图像。GD库不仅支持常见的GIF、JPEG、PNG等格式，还可以利用FreeType等字体库处理文本。在PHP中，使用GD库绘制...
echarts温度折线统计图
11-08
在本案例中，我们将重点讨论如何使用ECharts创建一个温度折线统计图。 一、ECharts的基本使用 ECharts的使用首先需要在HTML文件中引入ECharts的库文件，可以通过CDN链接或者本地下载后引入。引入后，我们需要在...
heightEcharts资源.zip
12-29
highcharts.js、highcharts-3d.js、exporting.js
ECHARTS高级定制
06-13
基于对ECHARTS进行扩展，扩展了ECHARTS的部分功能，增加了更多的配置项，更便捷的使用方法，尽量满足项目日常各种使用需求。如图例的旋转等。
Highcharts 曲线图
12-13
Highcharts 曲线图 下表列出了 Highcharts 不同类型的曲线图： 序号 图表类型 1 基本曲线图表 2 带有数据标签图表 3 图表异步加载数据 4 时间序列，可缩放的图表 5 X轴翻转曲线图 6 带标记曲线图 7 标示区曲线图 8 不规则时间间隔图表 9 对数 x 轴
android上动态实现ichartjs & highcharts 的绘图 2D 3D 折线图 柱形图 圆形图 等等
热门推荐
Men-DD
08-02 1万+
项目目录： Contact.java package com.example.html5_chart; public class Contact { private String name; private double value; private String color; public Contact(String name, double value, S
echarts折线统计图示例
rpf1234的博客
10-17 1002
双Y轴折线统计图html基础示例 页面效果 源码参考 https://pan.baidu.com/s/1wQHStOc5Kf9fIxwaXM2-Qg 提取码 2aqd
echart图表之highcharts
panda_225400的博客
03-15 3170
前段时间公司要统计各个站的OEE机台的使用率，在网页上前端上展现OEE图表，难点在与如何将这些数据转成合理的数据展现出来提示：以下是本篇文章正文内容，下面案例可供参考发现截来的图片和系统执行出来的图，不能完全一模一样，估计是使用脚本的版本不一样导致。
highcharts折线图基本使用
obj_null的博客
12-14 2681
折线图，画完，发现设置max值，但数据里面同时有多个数据为max值，连接起来得线会只显示一半
Highcharts折线图多图层设置，非常好看，可以做透明
最新发布
qq_40910788的博客
05-22 381
/这里用的是半透明的颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值