精华内容
下载资源
问答
  • <div><p>我更改了源码的y轴数据储存类型为ArrayList,可以显示图像,但是无法显示数据小数点后面的数据。 这是我添加的数据measureValue: [44.0, 44.0, 44.0, 43.0, 43.0, 43.0, 42.0, 42.0, 43.0, 43.0, 42.0,...
  • 与饼状图不同的是,折线图展现更多的数据,也会体现出更多的自动性。 先展示一下js代码: &lt;!-- 播放类型统计折线图 --&gt; &lt;script type="text/javascript"&gt; $(functio...

    作者原创:未经博主允许不许转载

    在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客。

    现在分析和展示折线图的绘制和案例分析,

    先展示效果图:

    与饼状图不同的是,折线图展现更多的数据,也会体现出更多的自动性。

    先展示一下js代码:

    <!-- 播放类型统计折线图 -->
    <script type="text/javascript">
    $(function () {
        var livFlowList=document.getElementById("livFlowList").value;
        var vodFlowList=$("#vodFlowList").val(); //此处接收到的为一个string类型的变量
        var yVodFlow =[];   //此处的数组为折线图里面需要的数据数组
        var yLiveFlow = [];
        var xMonth=[]; //自动生成的x轴坐标轴的数据元素
        //去除两边的[],,,循环遍历list集合中的元素,并将其解析为js数据类型,,,由于是将list集合接收来的数据,两边带有【】号,需要将其删除
        var test1 = livFlowList.substring(1,livFlowList.length-1);  //在使用substring方法时,必须有一个变量去接,否则不会返回响应的值
        var ss=test1.split(',');
        for(var i=0; i<ss.length; i++){
            yLiveFlow.push(parseFloat(ss[i]));//将字符串数组中的元素解析为js数字格式类型,并放入到数组中
        }
        
        var test2=vodFlowList.substring(1,vodFlowList.length-1);
        var tt=test2.split(',');
        for(var h=0;h<tt.length; h++){
            yVodFlow.push(parseFloat(tt[h]));
        }
        var flowMonthList=$("#flowMonthList").val();
        var monthList=flowMonthList.substring(1,flowMonthList.length-1);
        var gg=monthList.split(',');
        for(var k=0; k<gg.length; k++){
            xMonth.push(parseInt(gg[k]));
        }
        
         $('#line_playType').highcharts({
             title: {
                text: '流量统计',
                x: -20
            },
            credits: {
                text: '',
                href: ''
            },
            xAxis: {
                categories:xMonth
            },
            yAxis: {
                title: {
                    text: '流量(G)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: 'G'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '直播流量',
                data: yLiveFlow,
    color:Highcharts.getOptions().colors[3] }, { name:
    '点播流量', data:yVodFlow,
    color:Highcharts.getOptions().colors[7] } ] }); });
    </script>

    此处需要注意的事项,都写在代码的注释里面,当将js数组类型的变量放入到data中时,折线图会自动解析数组中的元素个数,

    并自动解析和展示。

    js中接收到的数据,都是从java后台得到的数据,并将数据放入到jsp页面中,然后再js从jsp中获取值。

    代码如下:

    <input type="hidden" name="vodFlowList" id="vodFlowList" value="${vodFlowList }"/>
                           <input type="hidden" name="livFlowList" id="livFlowList" value="${livFlowList }"/>
                           <input type="hidden" name="flowMonthList" id="flowMonthList" value="${flowMonthList }"/>
                            

    之所以放入到jsp页面中,是为了实现在js中方便快捷的获取到数据。

    现在展示出java后台获取数据部分的代码

    //直播点播流量增长折线图数据统计
            UserResourceMonthStatistics monthStatistics= new UserResourceMonthStatistics();
            monthStatistics.setUserId(userId);
    //从数据库查询展示数据的集合 List
    <UserResourceMonthStatistics> monthList=monthStatisticService.getResMonthStatisticsList(monthStatistics);
    //由于要展示3组数据,所以new了三个集合,并将需要的数据分别放入到对应的集合中,然后再setAttribute到jsp List
    <Double> livFlowList = new ArrayList<>(); List<Double> vodFlowList = new ArrayList<>(); List<String> flowMonthList = new ArrayList<>(); for (UserResourceMonthStatistics userStatistics : monthList) { long liveFlow2 = percentString(userStatistics.getLiveFlow()); //点播流量 double liveMonthFlow = chargeFlow(liveFlow2); long vodFlow2 = percentString(userStatistics.getVodFlow()); double vodMonthFlow = chargeFlow(vodFlow2); String month= userStatistics.getMonth(); flowMonthList.add(month); livFlowList.add(liveMonthFlow); vodFlowList.add(vodMonthFlow); } request.setAttribute("flowMonthList", flowMonthList); request.setAttribute("livFlowList", livFlowList); request.setAttribute("vodFlowList", vodFlowList);

     

    在刚开始做的时候,一直在想如何直接从list集合中获取某一属性的集合值,在网上搜了很久,也没有搜到对应的方法,

    于是写了循环,从而完成一个折线图的绘制。

          绘制折线图,也可以用ajax的方式实现,其中主要的逻辑和数据处理都是放在客户端处理,思路和在服务端处理的思路是

    一致的,用ajax请求到数据,一般该数据为一个集合,然后再js中循环该集合,并将需要的数据放入到数组中,然后将数组

    提供给折线图插件。。。

     

    展开全文
  • java绘制折线图的类很多,但是折线图上对应的点的坐标只能被设置为int型数据,而我的项目中对应的点坐标值都是浮点类型,这在代码中如何做修改,有哪些相关java类可以设置浮点坐标呢,求经验丰富的前辈指点!
  • JSP中JS获取java传值日期作为折线图横坐标显示 01. 数据准备 (1) 错误获取数据分析 此处要重要强调的是,js接收JSP中 java 数据部分,接收得到的值是字符串型,还要根据需要的类型转换,若需要日期xxxx-xx-xx年月日...

    JSP中JS获取java传值日期作为折线图横坐标显示

    01. 数据准备

    (1) 错误获取数据分析

    此处要重要强调的是,js接收JSP中 java 数据部分,接收得到的值是字符串型,还要根据需要的类型转换,若需要日期xxxx-xx-xx年月日格式,则需要用 SimpleDateFormat 格式化数据,同理若需要json型数据,要用 json.prase(),将字符串转换为json格式,才可在js中使用。

    如在JSP中有数组

    <% 
    dataList1 =[2018-2-6,2018-8-8,2018-8-28,2018-9-4.2018-9-12,2018-10-10,2018-10-24] 
    %>
    

    在JS中,获取dataList1 数组时,若直接用以下语句,获取为错误数据,得到 1985,1987…类似值

    var dataList1 = <%=dataList1%>;
    

    (2) 正确获取数据分析
    此处以时间来分析,由于js中获取的是字符串,故准备传入JS的值,将其转化为字符串数据,如上面的数组dataList1,由于dataList1数组中为时间,故传入JS时,先将时间转化为毫秒,即时间戳形式,代码如下,完整代码见第二部分:

    		java.util.Date date=sdf.parse(s_qjl_gmsj); 	//格式化购买时间,转化为毫秒	  
    		dataList1.add(date.getTime());// 添加购买时间
    

    得到的结果如下:

        dataList1 =[1517846400000, 1533657600000, 1535385600000, 1535385600000, 1535990400000, 1536681600000, 1537286400000, 1539100800000, 1540310400000]
    

    此时JS获取的dataList1数组为时间戳数组,在JS中再将时间戳在转化为日期格式即可。实现函数如下:

    function  formatDate(now)   { 
        var year = (now.getYear() < 1900) ? (1900 + now.getYear()) : now.getYear() //FF,Chrome浏览器获取的年份是当前年份-1900得到的,故加上1900
        var month= now.getMonth() + 1;   //获取月份,下标从0开始故+1
        var date= now.getDate();  //获取日期
        return year + "-" + month + "-" + date; //返回xxxx-xx-xx格式日期
      }  
    

    为什么年份要加上1900,可参考解析JS 获取当前年份后两位的问题
    对 dataList1 的转换操作如下,直接调用函数即可:

    for(var i=0;i<dataList1.length;i++){
        var d=new  Date(dataList1[i]);     
         arr3.push(formatDate(d));  
      }
    

    最后在JS中得到:
    dataList1 =[2018-2-6,2018-8-8,2018-8-28,2018-9-4.2018-9-12,2018-10-10,2018-10-24]

    02. echarts 画图实现

    (1)JS代码

    <script>
    function  formatDate(now)   { 
        var year = (now.getYear() < 1900) ? (1900 + now.getYear()) : now.getYear()
        var month= now.getMonth() + 1; 
        var date= now.getDate(); 
        return year + "-" + month + "-" + date; 
      }  
    </script>
    
    <script type="text/javascript">
    var dataList1 = <%=dataList1%>;
    var dataList2 = <%=dataList2%>;
    var s_qjl_name =" <%=s_qjl_name%>";
    var arr3 = [];  //存储转换得到的时间数组
    
    for(var i=0;i<dataList1.length;i++){
        var d=new  Date(dataList1[i]);     
         arr3.push(formatDate(d));  
    }
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: s_qjl_name,
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['最高价格','最低价格']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: arr3   //获取的时间作为横坐标
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'  //自动规划纵坐标
            }
        },
        series: [
            {
                name:'最高价格',
                type:'line',
                data:dataList2,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},   //显示数据最大值
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}  
                    ]
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
    

    (2)实现效果图

    在这里插入图片描述

    博主也在边学习边使用中,有问题欢迎大家留言共同讨论!

    展开全文
  • 当前,AAChartKit包括对以下图表类型的支持:柱形图,条形图,面积图,面积样条图,折线图,样条图,雷达图,极坐标图,饼图,气泡图,金字塔图,漏斗图,列范围和面积范围图。 计划支持更多图表类型。 AAChartKit...
  • 本文将介绍作者通过Java最佳图形解决方案JFreeChart实现折线图的详细过程。 在这个公司,用到了太多的JfreeChart,今天就对折线图作一个总结,希望对大家有点帮助,我这里直接是与业务逻辑相关的,业务需要的数据...

    本文将介绍作者通过Java最佳图形解决方案JFreeChart实现折线图的详细过程。

    在这个公司,用到了太多的JfreeChart,今天就对折线图作一个总结,希望对大家有点帮助,我这里直接是与业务逻辑相关的,业务需要的数据加载到数据集等,不过我会作一些注释的,呵,之前有网友建议写注释。

    折线图,大可分为两种,

    (1)X轴值类型为String的。

    2)常用的是X轴值是日期的,并且,有时需要满足这样的需求:

    1、时间要连续。

    2、时间可以设置固定的跨度,比如,2009-02-01,2009-02-04,2009-02-07……

    3、由于时间跨度较大,想要做到不同精度的图表,如时间为10天时,以日(yyyy-MM-dd)格式为精度,时间跨度为2个月时,以周(如2009年第3周)为精度,跨度为6个月时,以月(2009年8月)为精度。

    下面,针对比较复杂的(2)来讲解:

    1、取到业务逻辑需要的数据:(具体过程就不啰嗦了,就是查询数据库,得到想要的字段的值,加载到List里面) 返回List<PressureBean>

    PressureBean的包含的属性:
     

    1. int userId;  
    2.     String bpDate;  
    3.     String bpTime;  
    4.     int syspress;  //收缩压(mmHg)  
    5.     int diapress; //舒张压(mmHg) 

    2、加载数据集

    1. public static TimeSeriesCollection createTimeSeries(  
    2.             List<PressureBean> list, int dayOrweekOrmonth, Log log, String shou,String shu  
    3.             ) {  
    4.  
    5.         TimeSeriesCollection timesers = new TimeSeriesCollection();  
    6.  
    7.         int mon = 1;  
    8.         int day = 1;  
    9.         int ye = 2000;  
    10.         int week = 1;  
    11.  
    12.         // 按天显示  
    13.         if (dayOrweekOrmonth == 0) {  
    14.  
    15.             TimeSeries timeseries = new TimeSeries(shou,  
    16.                     org.jfree.data.time.Day.class);  
    17.             TimeSeries timeseries1 = new TimeSeries("c1",  
    18.                     org.jfree.data.time.Day.class);  
    19.  
    20.             TimeSeries timeseriedia = new TimeSeries(shu,  
    21.                     org.jfree.data.time.Day.class);  
    22.             TimeSeries timeseriedia1 = new TimeSeries("d1",  
    23.                     org.jfree.data.time.Day.class);  
    24.  
    25.             Iterator<PressureBean> it = list.iterator();  
    26.             while (it.hasNext()) {  
    27.                 PressureBean pres = it.next();  
    28.                 String date = pres.getBpDate();  
    29.  
    30.                 ye = Integer.parseInt(date.substring(0, 4));  
    31.                 mon = Integer.parseInt(date.substring(5, 7));  
    32.                 day = Integer.parseInt(date.substring(8, date.length()));  
    33.                 Day days = new Day(day, mon, ye);  
    34.  
    35.                 double sys = pres.getSyspress();  
    36.                 double dia = pres.getDiapress();  
    37.                 if (sys != -1 && sys > 0) {  
    38.                     timeseries.add(days, sys);  
    39.                 } else {  
    40.                     timeseries1.add(days, null);  
    41.                 }  
    42.                 if (sys != -1 && sys > 0) {  
    43.                     timeseriedia.add(days, dia);  
    44.                 } else {  
    45.                     timeseriedia1.add(days, null);  
    46.                 }  
    47.  
    48.             }  
    49.  
    50.             timesers.addSeries(timeseries);  
    51.             timesers.addSeries(timeseriedia);  
    52.             timesers.addSeries(timeseries1);  
    53.             timesers.addSeries(timeseriedia1);  
    54.  
    55.         } else if (dayOrweekOrmonth == 1) {//按周显示  
    56.             TimeSeries timeseries = new TimeSeries(shou,  
    57.                     org.jfree.data.time.Week.class);  
    58.             TimeSeries timeseries1 = new TimeSeries("c1",  
    59.                     org.jfree.data.time.Week.class);  
    60.  
    61.             TimeSeries timeseriedia = new TimeSeries(shu,  
    62.                     org.jfree.data.time.Week.class);  
    63.             TimeSeries timeseriedia1 = new TimeSeries("d1",  
    64.                     org.jfree.data.time.Week.class);  
    65.  
    66.             Iterator<PressureBean> it = list.iterator();  
    67.             while (it.hasNext()) {  
    68.                 PressureBean pres = it.next();  
    69.                 String date = pres.getBpDate();  
    70.  
    71.                 String[] spls = date.split("-");  
    72.                 if (spls.length == 2) {  
    73.                     ye = Integer.parseInt(spls[0]);  
    74.                     mon = Integer.parseInt(spls[1]);  
    75.                 } else {  
    76.                     log.error("the date of weeks is wrong");  
    77.                 }  
    78.  
    79.                 Week days = new Week(mon, ye);  
    80.                 double sys = pres.getSyspress();  
    81.                 double dia = pres.getDiapress();  
    82.  
    83.                 if (sys != -1 && sys > 0) {  
    84.                     timeseries.add(days, sys);  
    85.                 } else {  
    86.                     timeseries1.add(days, null);  
    87.                 }  
    88.                 if (sys != -1 && sys > 0) {  
    89.                     timeseriedia.add(days, dia);  
    90.                 } else {  
    91.                     timeseriedia1.add(days, null);  
    92.                 }  
    93.  
    94.             }  
    95.  
    96.             timesers.addSeries(timeseries);  
    97.             timesers.addSeries(timeseriedia);  
    98.             timesers.addSeries(timeseries1);  
    99.               
    100.             timesers.addSeries(timeseriedia1);  
    101.  
    102.         } else {//按月显示  
    103.             TimeSeries timeseries = new TimeSeries(shou,  
    104.                     org.jfree.data.time.Month.class);  
    105.             TimeSeries timeseries1 = new TimeSeries("c1",  
    106.                     org.jfree.data.time.Month.class);  
    107.  
    108.             TimeSeries timeseriedia = new TimeSeries(shu,  
    109.                     org.jfree.data.time.Month.class);  
    110.             TimeSeries timeseriedia1 = new TimeSeries("s",  
    111.                     org.jfree.data.time.Month.class);  
    112.  
    113.             Iterator<PressureBean> it = list.iterator();  
    114.             while (it.hasNext()) {  
    115.                 PressureBean pres = it.next();  
    116.                 String date = pres.getBpDate();  
    117.  
    118.                 String[] spls = date.split("-");  
    119.                 if (spls.length == 2) {  
    120.                     ye = Integer.parseInt(spls[0]);  
    121.                     mon = Integer.parseInt(spls[1]);  
    122.                 } else {  
    123.                     log.error("the date of weeks is wrong");  
    124.                 }  
    125.  
    126.                 Month days = new Month(mon, ye);  
    127.  
    128.                 double sys = pres.getSyspress();  
    129.                 double dia = pres.getDiapress();  
    130.  
    131.                 if (sys != -1 && sys > 0) {  
    132.                     timeseries.add(days, sys);  
    133.                 } else {  
    134.                     timeseries1.add(days, null);  
    135.                 }  
    136.                 if (sys != -1 && sys > 0) {  
    137.                     timeseriedia.add(days, dia);  
    138.                 } else {  
    139.                     timeseriedia1.add(days, null);  
    140.                 }  
    141.  
    142.             }  
    143.             timesers.addSeries(timeseries);  
    144.             timesers.addSeries(timeseriedia);  
    145.             timesers.addSeries(timeseries1);  
    146.               
    147.             timesers.addSeries(timeseriedia1);  
    148.  
    149.         }  
    150.  
    151.         return timesers;  
    152.     } 

    3、画折线图,两个数据集,收缩压和舒张压,并且,这两条曲线还各自包含一个区域范围,并不单单是一条基准线,而是一个基准范围。

    1. private static JFreeChart createChartPress(XYDataset xydataset,  
    2.             int weekOrmonth, String title, String y, String index, String week,  
    3.             String year, int searchby, String month, String nodatamess,  
    4.             List list, Log log, String bp_shou, String bp_shuzhang) {  
    5.  
    6.         // 有可能用户在后面的版本中故意输入不正常数值,但是为了保证图片画图的完整,这里先计算  
    7.         // 用户血压值的最大值。  
    8.  
    9.  
    10.         double maxpress = 0;  
    11.         double addmax = 50;  
    12.         double min = 40;  
    13.  
    14.         if (list != null && list.size() > 0) {  
    15.             Iterator<PressureBean> it = list.iterator();  
    16.             while (it.hasNext()) {  
    17.                 PressureBean pres = it.next();  
    18.                 double sys = pres.getSyspress();  
    19.                 double dia = pres.getDiapress();  
    20.  
    21.                 if (maxpress < sys) {  
    22.                     maxpress = sys;  
    23.  
    24.                 }  
    25.  
    26.                 if (maxpress < dia)  
    27.                     maxpress = dia;  
    28.  
    29.                 if (min > sys) {  
    30.                     min = sys;  
    31.                 }  
    32.  
    33.                 if (min > dia)  
    34.                     min = dia;  
    35.  
    36.             }  
    37.  
    38.             maxpress += addmax;  
    39.             min -= 10;  
    40.  
    41.  
    42.             log.info("high press value is =" + maxpress);  
    43.  
    44.         }  
    45.           
    46.         if (xydataset != null) {  
    47.             int counts = xydataset.getItemCount(0);  
    48.             if (counts == 0) {  
    49.                 xydataset = null;  
    50.             }  
    51.         }  
    52.  
    53.         JFreeChart jfreechart = ChartFactory.createTimeSeriesChart(title, "",  
    54.                 y, xydataset, true, true, false);  
    55.         jfreechart.setBackgroundPaint(Color.white);  
    56.           
    57.  
    58.         // 设置标题的颜色  
    59.         TextTitle text = new TextTitle(title);  
    60.         text.setPaint(new Color(102, 102, 102));  
    61.         jfreechart.setTitle(text);  
    62.         XYPlot xyplot = jfreechart.getXYPlot();  
    63.         xyplot.setBackgroundPaint(new Color(255, 253, 246));  
    64.         xyplot.setOutlineStroke(new BasicStroke(1.5f)); // 边框粗细  
    65.         ValueAxis vaxis = xyplot.getDomainAxis();  
    66.         vaxis.setAxisLineStroke(new BasicStroke(1.5f)); // 坐标轴粗细  
    67.         vaxis.setAxisLinePaint(new Color(215, 215, 215)); // 坐标轴颜色  
    68.         xyplot.setOutlineStroke(new BasicStroke(1.5f)); // 边框粗细  
    69.         vaxis.setLabelPaint(new Color(10, 10, 10)); // 坐标轴标题颜色  
    70.         vaxis.setTickLabelPaint(new Color(102, 102, 102)); // 坐标轴标尺值颜色  
    71.         vaxis.setLowerMargin(0.06d);// 分类轴下(左)边距  
    72.         vaxis.setUpperMargin(0.14d);// 分类轴下(右)边距,防止最后边的一个数据靠近了坐标轴。  
    73.           
    74.         //X轴为日期格式,这里是专门的处理日期的类,  
    75.         SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");  
    76.         DateAxis dateaxis = (DateAxis) xyplot.getDomainAxis();  
    77.         if (weekOrmonth == 0) {//以天为刻度,时间格式为yyyy-MM-dd,如2008-02-06  
    78.             dateaxis.setTickUnit(new DateTickUnit(DateTickUnit.DAY, 1, format));  
    79.         } else if (weekOrmonth == 1) {//以周为刻度,时间显示为 2009年第4周((这里是SimpleDateFormat的用法,  
    80.             //这里为了作繁体版,英文版和简体版,用了国际化处理,将这些可变的资源在文字资源里面,注意一下,这里的y,M、w是SimpleDateFormat的关键字,  
    81.             //如英文表示09年第3周就是09W3,那么,这里的W需要用‘’引起来)  
    82.             format = new SimpleDateFormat("yyyy" + year + index + "w" + week);  
    83.             dateaxis.setTickUnit(new DateTickUnit(DateTickUnit.DAY, 7, format));  
    84.         } else if (weekOrmonth == 2) {//以月为刻度,时间显示为09-02 (09年2月)  
    85.             format = new SimpleDateFormat("yy-MM");  
    86.             dateaxis  
    87.                     .setTickUnit(new DateTickUnit(DateTickUnit.MONTH, 1, format));  
    88.  
    89.         }  
    90.         dateaxis.setVerticalTickLabels(false); // 设为true表示横坐标旋转到垂直。  
    91.         if (searchby == 6 || searchby == 3) {  
    92.             dateaxis.setAutoTickUnitSelection(true); // 由于横轴标签过多,这里设置为自动格式 。  
    93.             dateaxis.setDateFormatOverride(format);  
    94.         }  
    95.         dateaxis.setTickMarkPosition(DateTickMarkPosition.START);  
    96.  
    97.         ValueAxis valueAxis = xyplot.getRangeAxis();  
    98.         valueAxis.setUpperBound(maxpress);  
    99.         valueAxis.setAutoRangeMinimumSize(1);  
    100.         valueAxis.setLowerBound(min);  
    101.         valueAxis.setAutoRange(false);  
    102.  
    103.         valueAxis.setAxisLineStroke(new BasicStroke(1.5f)); // 坐标轴粗细  
    104.         valueAxis.setAxisLinePaint(new Color(215, 215, 215)); // 坐标轴颜色  
    105.         valueAxis.setLabelPaint(new Color(10, 10, 10)); // 坐标轴标题颜色  
    106.         valueAxis.setTickLabelPaint(new Color(102, 102, 102)); // 坐标轴标尺值颜色  
    107.           
    108.         xyplot.setRangeGridlinesVisible(true);  
    109.         xyplot.setDomainGridlinesVisible(true);  
    110.         xyplot.setRangeGridlinePaint(Color.LIGHT_GRAY);  
    111.         xyplot.setDomainGridlinePaint(Color.LIGHT_GRAY);  
    112.         xyplot.setBackgroundPaint(new Color(255, 253, 246));  
    113.         xyplot.setNoDataMessage(nodatamess);//没有数据时显示的文字说明。  
    114.         xyplot.setNoDataMessageFont(new Font("", Font.BOLD, 14));//字体的大小,粗体。  
    115.         xyplot.setNoDataMessagePaint(new Color(87, 149, 117));//字体颜色  
    116.         xyplot.setAxisOffset(new RectangleInsets(0d, 0d, 0d, 5d)); //  
    117.  
    118.         // add range marker(舒张压的区域marker,范围是从62到81)  
    119.  
    120.         double lowpress = 62;  
    121.         double uperpress = 81;  
    122.         IntervalMarker intermarker = new IntervalMarker(lowpress, uperpress);  
    123.         intermarker.setPaint(Color.decode("#66FFCC"));// 域顏色  
    124.           
    125.         intermarker.setLabelFont(new Font("SansSerif", 41, 14));  
    126.         intermarker.setLabelPaint(Color.RED);  
    127.         intermarker.setLabel(bp_shuzhang);  
    128.  
    129.         if (xydataset != null) {  
    130.             xyplot.addRangeMarker(intermarker, Layer.BACKGROUND);  
    131.         }  
    132.     //(收缩压的区域marker,范围是从102到120)  
    133.         double lowpress1 = 102;  
    134.         double uperpress1 = 120;  
    135.         IntervalMarker inter = new IntervalMarker(lowpress1, uperpress1);  
    136.         inter.setLabelOffsetType(LengthAdjustmentType.EXPAND);  
    137.         inter.setPaint(Color.decode("#66FFCC"));// 域顏色  
    138.  
    139.  
    140.         inter.setLabelFont(new Font("SansSerif", 41, 14));  
    141.         inter.setLabelPaint(Color.RED);  
    142.         inter.setLabel(bp_shou);  
    143.           
    144.         if (xydataset != null) {  
    145.             xyplot.addRangeMarker(inter, Layer.BACKGROUND); // 加上Layer.BACKGROUND,将maker调到折线下面。  
    146.         }  
    147.  
    148.         XYLineAndShapeRenderer xylineandshaperenderer = (XYLineAndShapeRenderer) xyplot  
    149.                 .getRenderer();  
    150.         //第一条折线的颜色  
    151.         xylineandshaperenderer.setBaseItemLabelsVisible(true);  
    152.         xylineandshaperenderer.setSeriesFillPaint(0, new Color(127, 128, 0));  
    153.         xylineandshaperenderer.setSeriesPaint(0, new Color(127, 128, 0));  
    154.  
    155.         xylineandshaperenderer.setSeriesShapesVisible(0, true);  
    156.         xylineandshaperenderer.setSeriesShapesVisible(1, true);  
    157.  
    158.         //第二条折线的颜色  
    159.         xylineandshaperenderer.setSeriesFillPaint(1, new Color(254, 103, 0));  
    160.         xylineandshaperenderer.setSeriesPaint(1, new Color(254, 103, 0));  
    161.         xylineandshaperenderer.setSeriesShapesVisible(1, true);  
    162.         xylineandshaperenderer.setSeriesVisible(2, false);//  
    163.         xylineandshaperenderer.setSeriesVisible(3, false);//不显示下面标题  
    164.  
    165.         //折线的粗细调  
    166.         StandardXYToolTipGenerator xytool = new StandardXYToolTipGenerator();  
    167.         xylineandshaperenderer.setToolTipGenerator(xytool);  
    168.         xylineandshaperenderer.setStroke(new BasicStroke(1.5f));  
    169.  
    170.         // 显示节点的值  
    171.         xylineandshaperenderer.setBaseItemLabelsVisible(true);  
    172.         xylineandshaperenderer  
    173.                 .setBasePositiveItemLabelPosition(new ItemLabelPosition(  
    174.                         ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE_CENTER));  
    175.         xylineandshaperenderer  
    176.                 .setBaseItemLabelGenerator(new StandardXYItemLabelGenerator());  
    177.         xylineandshaperenderer.setBaseItemLabelPaint(new Color(102, 102, 102));// 显示折点数值字体的颜色  
    178.  
    179.         return jfreechart;  
    180.     } 

    4、将图片URL返回到页面

    1. public static void drawPressLineChart(IrisIoInterface io, Log log,  
    2.             TimeSeriesCollection timesers, int weekormonth, String title,  
    3.             String y, String index, String week, String year, int searchby,  
    4.             String month, String nodatamess, List list, String bp_shou,  
    5.             String bp_shuzhang) {  
    6.  
    7.         JFreeChart chart = createChartPress(timesers, weekormonth, title, y,  
    8.                 index, week, year, searchby, month, nodatamess, list, log,  
    9.                 bp_shou, bp_shuzhang);  
    10.  
    11.         HttpServletRequest request = io.getRequest();  
    12.         String filename = "";  
    13.         String graphURL = "";  
    14.         try {  
    15.             filename = ServletUtilities.saveChartAsPNG(chart, 650, 280, null,  
    16.                     io.getSession());  
    17.             graphURL = request.getContextPath() + "/displayChart?filename=" 
    18.                     + filename;  
    19.         } catch (IOException e) {  
    20.             // TODO Auto-generated catch block  
    21.             e.printStackTrace();  
    22.             log.error(e);  
    23.         }  
    24.  
    25.         io.setData("filename1", filename, BeanShare.BEAN_SHARE_REQUEST);  
    26.         io.setData("presslineurl", graphURL, BeanShare.BEAN_SHARE_REQUEST);  
    27.  
    28.     } 

    效果图如下:

    以天为刻度:

    以周为刻度:

    以月为刻度:

     

    转载于:https://www.cnblogs.com/zkx001/p/4604292.html

    展开全文
  • 它支持单点触摸进行数据检查,多点触摸进行缩放以及应用程序的高级响应能力。 产品特点 支持Android , Kotlin和Java 。 功能强大,支持column chart , bar chart , area chart bar chart , a
  • 柱状图+折线图+双Y轴

    2020-09-12 21:23:11
    时间格式问题 ...数据类型都能对上以后,但是数据在前台显示不出来的问题 BUG原因:把ajax请求弄成同步的。原因在于你请求数据后还为等数据返回。echarts 就已经在展示数据了。当然这个时候数组是.

    效果图

    时间格式问题

    传到JS的时间格式

    后台中的日期格式是java.util.Date 传到前台变成String类型的时间格式,所以要把格式转变一下。
    renderTime:是把上面的那种格式改成String的YYYY-MM-DD HH:mm;ss
    convertDateFromString:把YYYY-MM-DD HH:mm;ss改成date格式

    数据类型都能对上以后,但是数据在前台显示不出来的问题

    BUG原因:把ajax请求弄成同步的。原因在于你请求数据后还为等数据返回。echarts 就已经在展示数据了。当然这个时候数组是空的

    解决方法:chart2.setOption(option); 把这句话放入到post的请求方法里面

    echarts y轴数据如果太大就会造成坐标轴显示不完全的问题

    我的解决方法是

    grid: {
                        left: 40
                    },
    

    JS完整代码

    //时间格式化函数
            renderTime:function(date){
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
            },
    
            convertDateFromString:function(dateString){
                if (dateString) {
                    var arr1 = dateString.split(" ");
                    var sdate = arr1[0].split('-');
                    var date = new Date(sdate[0], sdate[1]-1, sdate[2]);
                    return date;
                }
            },
    
    initChart2:function () {
                var me=this;
                var category = [];
                var lineData = [];
                var barData = [];
                var	chart2= echarts.init(document.getElementById('chart2'));
    
                var url=__ctx+"/platform/home/getCountDataBytime";
                // $.ajaxSetup({
                //     async: false
                // });
                $.post(url,function(result){
                    $(result).each(function(){
                        var obj = this;
                        var dt = me.renderTime(obj.endTime);
                        var date = me.convertDateFromString(dt);
                        category.push([
                            date.getFullYear(),
                            date.getMonth()  +1,
                            date.getDate()
                        ].join('-'));
                        // console.log(category);
                        b= parseInt(obj.countVal);
                        d=parseInt(obj.totalMoney);
                        barData.push(b);
                        lineData.push(d);
                    });
                    chart2.setOption(option);
                });
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true,
                                backgroundColor: '#333'
                            }
                        }
                    },
                    legend: {
                        data: ['加氢金额', '加氢量'],
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    xAxis: {
                        data: category,
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    yAxis:[
                        {type: 'value',
                        name: '加氢金额',
                        splitLine: {show: false},
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                        {
                            type: 'value',
                        name: '加氢量',
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: '#ccc'
                                }
                            }
                        },
                    ],
                    grid: {
                        left: 40
                    },
                    series: [{
                        name: '加氢金额',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: "#14c8d4",
                            }
                        },
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 2,
                        data: lineData
                    }, {
                        name: '加氢量',
                        type: 'bar',
                        yAxisIndex: 1,
                        barWidth: 8,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 3,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#8b24ee'},
                                        {offset: 1, color: '#30c9d4'}
                                    ]
                                )
                            }
                        },
                        data: barData
                    }]
                };
    
                var faultByHourIndex = 0; //播放所在下标
                var faultByHourTime = setInterval(function() { //使得tootip每隔三秒自动显示
                    chart2.dispatchAction({
                        type: 'showTip', // 根据 tooltip 的配置项显示提示框。
                        seriesIndex: 0,
                        dataIndex: faultByHourIndex
                    });
                    faultByHourIndex++;
                    if (faultByHourIndex > option.series[0].data.length) {
                        faultByHourIndex = 0;
                    }
                    if (faultByHourIndex > option.series[1].data.length) {
                        faultByHourIndex = 0;
                    }
                }, 3000);
            },
    
    展开全文
  • AAChartCore | | 有如下Kotlin版本的AAChartCore的链接 前言 ... 完全支持Java语言,并且有更多类型的版本,例如Kotlin语言版本 , Swift语言版本 , Objective-c语言版本 。 要获取更多详细信息
  •  这个一个根据客户类型查询出来的关于合同金额的统计,比较简单。类型只有两种,柱也只有三个(这个不重要) 需要用到的主要的Java代码:   Action代码(SQL语句随便写): SView view= (SView) dao.get...
  • Java 创建Excel散点

    2021-01-07 14:27:34
    Java 创建Excel散点图 散点图是指在回归分析中,数据...这里可支持的图标类型多达70多种,如柱形图、饼状图、折线图、散点图、混合图、雷达图、气泡图等等。本文以创建散点图为例。 Java 代码示例 import com.spire.xl
  • 如图表中既存在柱形图,又有折线图或面积图,且各图表类型的纵坐标轴可设置在左或右,实现混合图表。如下图效果:, 2.示例2.1准备数据新建工作薄,添加数据集,SQL语句为SELECT 产品名称, 库存量, 订购量, 再订购量...
  • Java集合框架关系

    万次阅读 多人点赞 2019-03-10 18:51:45
    Java集合中实际存放的只是对象的引用,每个集合元素都是一个引用变量,实际内容都放在堆内存或者方法区里面,但是基本数据类型是在栈内存上分配空间的,栈上的数据随时就会被收回的。 集合框架: 上述类图中...
  • 当前支持折线、曲线、区域、区域曲线、柱形、条形、饼图、散点、角度测量、区域排列、区域曲线排列、柱形排列、极坐标等几十种图表类型。Highcharts最新版本v8.0.0发布,添加了带有动画的数据排序...
  • 使用SpreadJS v12中的这些出色的新功能扩展了您的数据可视化工具集!我们不仅为最常见的图表类型添加了动画,而且...添加加载和更新动画到JavaScript图表借助SpreadJS为柱状图,条形图,折线图和饼图创建新的无缝加...
  • // 打印出path的内容与数据类型测试是否会出错 console.log("这里是path展示出来的坐标轴数组"+path+"这里是tapyof属性:"+typeof(path)) // 通过获取的路径坐标轴,绘制路线 var polyline = new AMap....
  • title: Redis中zset类型数据的应用(实例+原理) date: 2019-05-27 tags: [java,Redis] 项目需求 公司APP页面需要展示一个横轴为时间,纵轴为指定基金和沪深300指数(或者其他指数)的折线图折线图的范围是可选的...
  • 灵活的查询交互报表为用户提供了通用的查询面板用于各种条件过滤,在报表展现界面,用户设定各查询条件的值后...多种统计图类型报表提供了几乎所有常见的图表类型,包含柱形、折线、饼、条形、区域、散点、特殊 七...
  • TeeChart for java是一款功能强大的图表控件,内置丰富的图表工具、函数和指标、图表主题等,可以制作错误图、水平箱线图、水平条形图、面积图、折线图等,支持Eclipse、NetBeans、IntelliJ IDEA等java编程环境,是...
  • 二、层次关系如所示:中,实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口Collection接口是集合类的根接口,Java中没有提供这个接口的直接的实现类。但是却让其被继承产生了两个接口,就是...
  • Java集合

    2017-09-21 17:10:55
     数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用。  集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用。 二、关系:...
  • java集合

    2017-09-26 21:20:25
    数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用。 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用。 二、层次关系 如...
  • 数组(可以存储基本数据类型)是用来存对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用。 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用。 二、层次关系 Java...
  • 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用。 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用。 二、层次关系...
  • java 集合

    2018-04-19 17:06:13
    二、层次关系如所示:中,实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口Collection接口是集合类的根接口,Java中没有提供这个接口的直接的实现类。但是却让其被继承产生了两个接口,就是...
  • Java 集合

    2018-03-07 12:31:33
    二、层次关系如所示:中,实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口Collection接口是集合类的根接口,Java中没有提供这个接口的直接的实现类。但是却让其被继承产生了两个接口,就是...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 243
精华内容 97
关键字:

java折线图数据类型

java 订阅