Как я могу заполнить данные JSON в диаграммах с помощью вызова AJAX?

Question

Я хочу передать данные json в jsp и заполнить их данными диаграмм.Как я могу это сделать?Ранее я устанавливаю значение данных, отправляя каждое значение с помощью атрибута модели.В EmployeeController у меня есть метод lineBarChart, как это: -

@RequestMapping("/lineBar")
    public String lineBarChart(Model model)
    {
        List<Employee> emp = employeeMapper.getAllEmployees();
        int cseCount = 0;
        int ecCount = 0;
        int itCount = 0;
        int cseSalary = 0;
        int ecSalary = 0;
        int itSalary = 0;

        for (int j = 0; j < emp.size(); j++)
        {
            if (emp.get(j).getDepartment().equalsIgnoreCase("CSE"))
            {
                cseSalary += emp.get(j).getSalary();
                cseCount++;
            }
            else if (emp.get(j).getDepartment().equalsIgnoreCase("IT"))
            {
                itSalary += emp.get(j).getSalary();
                itCount++;
            }
            else
            {
                ecSalary += emp.get(j).getSalary();
                ecCount++;
            }
        }

        Map<Integer, Integer> map = new HashMap<>();
        map.put(cseCount, cseSalary);
        map.put(ecCount, ecSalary);
        map.put(itCount, itSalary);

        GsonBuilder gsonMapBuilder = new GsonBuilder();
        Gson gsonObject = gsonMapBuilder.create();
        String jsonObject = gsonObject.toJson(map);
        System.out.println(jsonObject);

        // Previously i am doing this now i want to send json to chart
        model.addAttribute("cse", cseCount);
        model.addAttribute("ec", ecCount);
        model.addAttribute("it", itCount);
        model.addAttribute("cseSalary", cseSalary);
        model.addAttribute("itSalary", itSalary);
        model.addAttribute("ecSalary", ecSalary);

        return "lineBarChart";
    }

Вот так lineBarChart.jsp: -

<script>
$(function()
{ 
    var lineBarChart = new CanvasJS.Chart("lineBarChartContainer", 
    {
        animationEnabled: true,
        theme: "light2",
        title:
        {
            text: "Branch wise total Employee Salary",
            fontSize: 20,
            fontFamily: "Trebuchet MS",
            fontWeight: "bold",
            margin: 10
        },
        axisY: 
        {
            title: "Number of Employee",
            suffix: " K"
        },
        data: 
        [{        
            type: "column",
            dataPoints: 
            [      
                { y: ${cse}, label: "CSE" },   
                { y: ${ec},  label: "EC" },
                { y: ${it},  label: "IT" }
            ]
        },
        {        
            type: "line",
            toolTipContent: "{label}: {y}K",        
            showInLegend: true,
            dataPoints: 
            [      
                { y: ${cseSalary}/10000, label: "CSE" },                   
                { y: ${ecSalary}/10000,  label: "EC" },                         
                { y: ${itSalary}/10000,  label: "IT" }                         
            ]
        }]
    });
    lineBarChart.render();
});
</script>
<div class="card shadow p-3 bg-white rounded">
    <div class="card-body">
        <div id="lineBarChartContainer" style="height: 240px; width: 100%;"></div>
    </div>
</div>

Я вызываю файл lineBarChart.jsp из другого jsp с помощью вызова ajax.

Как это: -

<div class="row" >
        <div class="col-md-6 p-1">
        <div id="lineBarGraph"></div>
    </div>
</div>
$.ajax({url: "lineBar",
            async: false, 
            success: function(result) 
            { 
                console.log(result);
                $("#lineBarGraph").html(result);
            }
        });

Answer 1

Вам потребуется создать второй метод-обработчик или контроллер.

Существующий контроллер просто загрузит JSP, так что вся логика может быть удалена из него.Новый метод контроллера будет иметь логику для загрузки и возврата данных, запрошенных вашим Ajax-вызовом, и будет выглядеть следующим образом.

Обратите внимание на аннотацию @ResponseBody.

Обновите ваш Ajax-вызов дозапросить новый путь fetchChartData или любой другой, какой вы хотите:

@RequestMapping("/fetchChartData", produces="application/json")
public @ResponseBody String getChartData()
{
    List<Employee> emp = employeeMapper.getAllEmployees();
    int cseCount = 0;
    int ecCount = 0;
    int itCount = 0;
    int cseSalary = 0;
    int ecSalary = 0;
    int itSalary = 0;

    for (int j = 0; j < emp.size(); j++)
    {
        if (emp.get(j).getDepartment().equalsIgnoreCase("CSE"))
        {
            cseSalary += emp.get(j).getSalary();
            cseCount++;
        }
        else if (emp.get(j).getDepartment().equalsIgnoreCase("IT"))
        {
            itSalary += emp.get(j).getSalary();
            itCount++;
        }
        else
        {
            ecSalary += emp.get(j).getSalary();
            ecCount++;
        }
    }

    Map<Integer, Integer> map = new HashMap<>();
    map.put(cseCount, cseSalary);
    map.put(ecCount, ecSalary);
    map.put(itCount, itSalary);

    //you could remove the below and return the map directly
    GsonBuilder gsonMapBuilder = new GsonBuilder();
    Gson gsonObject = gsonMapBuilder.create();

    return gsonObject.toJson(map);
}

Можно упростить дальнейшее изменение, изменив тип возвращаемого метода на Map<Integer, Integer> и вернуть его напрямую.Spring Boot будет обрабатывать сериализацию в Json, используя настроенную библиотеку Json:

https://www.callicoder.com/configuring-spring-boot-to-use-gson-instead-of-jackson/