用tymeleaf highcharts spring mvc java制作饼图

问题描述 投票：0回答：1

我想在 highcharts 中创建一个包含动态数据的饼图

我真的需要你的帮助

我想制作一个统计性别的饼图

这是我的代码

我真的被困在那里了

................................................ ................................

控制器：

@RequestMapping("/piechart")
        public ResponseEntity<?> getAll(Model model) {
        List<user> list =  userRepository.allusers();
        return new ResponseEntity<>(list,HttpStatus.OK);
    
    }

存储库：

 @Query(value=" SELECT *,count(*) AS count_gender FROM user GROUP BY gender", nativeQuery = true)
    List<User> allusers();

HTML：

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    
<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script th:inline="javascript">
    $.ajax({
        url: 'piechart',
        dataType:'json',
        
        success: function(result){
            var series=[];
            var data= [];
        
            for(var i=0;i<result.length;i++){
                var object={};
                object.name=result[i].gender;
                object.y=result[i];
                data.push(object);
            }
            var seriesObject={
                    name:'percentage',
                    colorByPoint: true,
                    data: data
            }
            series.push(seriesObject);
            drewPiechart(series);
        }
    })
    function drewPiechart(series){
        Highcharts.setOptions({
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
        });
        Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
                
            },
            title: {
              
            },
            tooltip: {
                formatter: function(){
                    return 'y value: '+this.y+'<br/>is '+this.percentage+'% of total ('+this.total+')';
                }
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    },
            showInLegend: true
                }
            },
           
            series: series
         });
    }
 </script>
 </body>
</html>

这是我的结果：

它没有显示任何内容 bcz 我不知道如何获取 yaxis 上查询的计数结果

java mysql spring-boot spring-mvc highcharts
1个回答
0
投票

没有答案 下面这个网站有方法

http://127.0.0.1:9999/board/form/view/java/4940/1/55

你可以像下面的脚本一样解析它。

    // object -> string (배열 형태)
    for(let i = 0; i < data.length; i++ ) {
        //console.log("->> i : " + i);
        //console.log("->> i : " + data[i].str_hclass);
        //console.log("->> i : " + data[i].cnt_class);
        str += "[\"" + data[i].str_hclass + "(" + data[i].cnt_per + "%)\", " + data[i].cnt_class + " ]";
        if( i < data.length - 1 )
        str += ",";
    }
    str = "[" + str + "]";
    //console.log("결과 : " + str);
    //console.log("========>>> data str : " + typeof str); // data type : String

    let object = JSON.parse(str); // string to object(array)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.