首页 > 解决方案 > 无法在 jquery HighCharts 中显示 ModelMap 对象数据

问题描述

' 在我的控制器方法中:
下面的代码将返回带有一组记录的数据,其中包含 3 个字段
1 Fruits 30
2 Vegetables 40 .... 等等
这里我想在 HighCharts 图中显示第二列和第三列 '

   List<Object[]> vendingTypesCount = svService.getVendingTypeWiseVendorsCount();
       Map<String,Object> mp = new LinkedHashMap<String,Object>();   // mp is LinkedHashMap object
       for (Object[] objects : vendingTypesCount) {
          mp.put(objects[1].toString(), objects[2]);           
       }   

      // checked in Java, data is getting accessed perfectly

      map.addAttribute("vendingTypesData",mp);   // here map is the ModelMap object

// 在我的 Jsp 中:

 <figure class="highcharts-figure">
    <div id="container2"></div>
    <p class="highcharts-description">        
    </p>
   </figure>


   <script type="text/javascript">
    Highcharts.chart('container2', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Vending Types Data '
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [[${vendingTypeData.keySet()}]],         // data not getting accessed,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Number of Vendors'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [[${vendingTypeData.values()}]]           // data is not getting accessed
  });

标签: jqueryspring-bootjsphighcharts

解决方案


推荐阅读