Highcharts的使用(2个Y轴&折线图)

后台页面:

List<Map<String, String>> list = saleService.getSaleAndBuyer(); StringBuffer dateArray = new StringBuffer(); StringBuffer saleArray = new StringBuffer(); StringBuffer buyerArray = new StringBuffer(); dateArray.append("["); saleArray.append("["); buyerArray.append("["); for (int i=0;i<list.size();i++) { dateArray.append(list.get(i).get("date")); //数据格式的转换 saleArray.append(String.valueOf(list.get(i).get("salePrice"))); buyerArray.append(String.valueOf(list.get(i).get("buyerCount"))); if (i < list.size()-1) { dateArray.append(","); saleArray.append(","); buyerArray.append(","); } } dateArray.append("]"); saleArray.append("]"); buyerArray.append("]"); request.setAttribute("dateArray", dateArray); request.setAttribute("saleArray", saleArray); request.setAttribute("buyerArray", buyerArray); logger.warn("登录成功"); return "/stock/success";

前台页面:

<script> **var** dateList = "**${**dateArray**}**".replace("\[", "").replace("\]", "").split(","); **var** salePrice = "**${**saleArray**}**".replace("\[", "").replace("\]", "").split(","); **var** buyerCount = "**${**buyerArray**}**".replace("\[", "").replace("\]", "").split(","); **for** (**var** i = 0; i < buyerCount.length; i++) { buyerCount\[i\] = parseInt(buyerCount\[i\]) } ; **for** (**var** i = 0; i < salePrice.length; i++) { salePrice\[i\] = parseFloat(salePrice\[i\]) } ; **var** chart = { zoomType: 'xy' }; **var** subtitle = { text: '数据来源:www.xiaoduoyijia.xyz' }; **var** title = { text: '销售数据图' }; **var** xAxis = { categories: dateList, crosshair: **true ** }; **var** yAxis = \[{ // 第一条Y轴 labels: { format: '{value}人', style: { color: Highcharts.getOptions().colors\[1\] } }, title: { text: '单日客户量', style: { color: Highcharts.getOptions().colors\[1\] } } }, { // 第二条Y轴 title: { text: '单日销售额', style: { color: Highcharts.getOptions().colors\[0\] } }, labels: { format: '¥{value}', style: { color: Highcharts.getOptions().colors\[0\] } }, opposite: **true ** }\]; **var** tooltip = { shared: **true ** }; **var** legend = { layout: 'vertical', align: 'right', x: 0, verticalAlign: 'top', y: 0, floating: **true**, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }; **var** series = \[{ name: '单日销售额', type: 'column', yAxis: 1, data: salePrice, tooltip: { valueSuffix: '元' } }, { name: '单日客户量', data: buyerCount, tooltip: { valueSuffix: '人' } } \]; **var** json = {}; json.chart \= chart; json.title \= title; json.subtitle \= subtitle; json.xAxis \= xAxis; json.yAxis \= yAxis; json.tooltip \= tooltip; json.legend \= legend; json.series \= series; $('#container').highcharts(json); </script>

1、BigDemical 与String之间的转换

2、前后台的取值之后是否是所需要的,不是所需再转换

附:highcharts使用文档地址:https://www.hcharts.cn/docs/basic-chart

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )