The backend array is passed to the frontend <script>

Create an array of integers in the background

import java.util.ArrayList;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class JsonAction extends ActionSupport {

    private static final long serialVersionUID = 1L;

    public String execute() throws Exception {

        ActionContext context=ActionContext.getContext();
        ArrayList<Integer> list=new ArrayList<Integer>();
        for(int i=0;i<12;i++)
            list.add(i);
        context.getSession().put("list", list);
        return SUCCESS;
    }

}

The foreground uses the jstl standard tag library to obtain array objects

<c:set var="list" value="${list }" scope="session" />

Use EL expression to assign list object to javaScript object

<script language="JavaScript">
var arrayList=${list};
</script>

Front-end jsp source code

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>报表</title>

<!-- css样式文件 -->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jquery.js -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- bootsrap的js文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>

<div class="container">
        <div class="row">
            <div
                class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
                <div id="container"
                    style="width: 550px; height: 400px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
<form action="jsonAction.action" method="post">
<input type="submit" value="提交">
</form>

<c:set var="list" value="${list }" scope="session" />

<script language="JavaScript">
var arrayList=${list};


$(document).ready(function() {
   var title = {
      text: '年度报表'   
   };
   var subtitle = {
      text: '网上书店'
   };
   var xAxis = {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   };
   var yAxis = {
      title: {
         text: '销售总数 (本)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   

   var tooltip = {
      valueSuffix: '\xB0C'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   var series =  [
      {
         name: '每月销售数量',
         data: arrayList,
      }
   ];

   var json = {};

   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>
</body>
</html>

operation result
write picture description here

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325578948&siteId=291194637