Highcharts的使用（2个Y轴&折线图）

2019独角兽企业重金招聘Python工程师标准>>>

后台页面：

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

 

转载于:https://my.oschina.net/inchlifc/blog/1571287