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