我如何使用highchart在jsp中的spring mvc中繪制圖形

Question

我想在jsp unsando spring mvc和highchart中繪制圖形，但是我仍然做不到，我等待您的回答，謝謝

我的觀點，這是我想要繪制圖形的地方，但是圖形未顯示，它什么也沒顯示

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Chart</title> 
            <script src="resources/assets/js/highcharts.js"></script>
            <script src="resources/assets/js/highcharts-3d.js"></script>
<!--          <script src="resources/assets/js/jquery.js"></script> -->
            <script src="https://code.jquery.com/jquery-3.2.1.js"></script>

    </head>

    <body class="page-container-bg-solid">
        <div class="page-container">
            <div class="page-content-wrapper">
                <div class="page-head" style="background-color:#eff3f8;padding-top:40px">
                    <div class="container">
                        <div class="row" style="margin-bottom:30px">
                            <div class="col-md-6">
                                <h1>my Chart</h1>
                            </div> 
                        </div>
                        <div class="row" style="margin-bottom:30px">                         
                            <div class="col-md-6" style="margin-top:20px">
                                <div id="mychart" style="width:100%; height:400px;"></div>
                            </div> 
                        </div>                        
                    </div> 
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () { 
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
                drawSalesByTypeChart();
                drawSalesByRegionChart();
            });


            function drawSalesByRegionChart() {
                var salesByRegionChart = Highcharts.chart('mychart', {
                    chart: {
                        type: 'pie',
                        margin: 40,
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        }
                    },
                    title: {
                        text: 'Sales by Region'
                    },
                    plotOptions: { 
                        pie: {
                            allowPointSelect: true,
                            depth: 35
                        }
                    },
                    series: [{ 
                        name: 'Regions',
                        colorByPoint:true,
                        data: [{
                            name: 'Northeast',
                            y: [[${listGraph}]]
                        }                      
                        ]
                    }]
                });
            }
        </script>        
    </body>
</html>

我的控制器

@RequestMapping(value = "/graphReport")
    public String combo(QcReport qc, Model model) throws IOException {
        List<QcReport> listGraph = assayServ.listGraphAssay();
        model.addAttribute("listGraph", listGraph);
        return ("graphReport");
    }

Answer 1

當我在下面的教程中比較您的工作時：

https://careydevelopment.us/2017/07/01/add-charts-spring-boot-app-highchart/

您試圖在傳遞列表$ {listGraph}時繪制一個需要整數值的餅圖。

                    series: [{ 
                        name: 'Regions',
                        colorByPoint:true,
                        data: [{
                            name: 'Northeast',
                            y: [[${listGraph}]]
                        }                      
                        ]

我如何使用highchart在jsp中的spring mvc中繪制圖形

問題描述

1 個解決方案

解決方案1
0 已采納 2019-09-12 18:56:13

我如何使用highchart在jsp中的spring mvc中繪制圖形

問題描述

1 個解決方案

解決方案1 0 已采納 2019-09-12 18:56:13

解決方案1
0 已采納 2019-09-12 18:56:13