将参数从Java传递到HTML以创建Google图表

Question

我想将四个查询值放入Google图表value1至value4中 。 问题是将值从Java传递到html。 在下面，我发布了相关代码。

那些

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {


    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['value1', **3**],
      ['value2', **2**],
      ['value3', **2**],
      ['value4', **2**]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

这是java类。

    public ResponseEntity<Map<String,Object>> status() {
    Map<String,Object> map = new HashMap<String,Object>();

    long countByXmlSuccessResult = statusRepository.countByXmlSuccessResult();
    long countByXmlErrorResult = statusRepository.countByXmlErrorResult();
    long countByJsonSuccessResult = statusRepository.countByJsonSuccessResult();
    long countByJsonErrorResult = statusRepository.countByJsonErrorResult();

    map.put("xml success:", **countByXmlSuccessResult**);
    map.put("xml error:", **countByXmlErrorResult**);
    map.put("json success:", **countByJsonSuccessResult**);
    map.put("json error:", **countByJsonErrorResult**);


    return new ResponseEntity<Map<String,Object>>(map, HttpStatus.OK);
}

另外，html文件路径在src / main / java文件夹下，而Java文件路径在src / main / resources文件夹下。

Answer 1

您可以将该Java功能公开为服务，然后使用jquery对该服务进行ajax调用，最后获取结果并在Google图表代码中使用它。 例如：Spring Boot：

@RestController
public class myHomeController{
   ...
   @RequestMapping("/getValues")
   public someDomainClass getMyValues(){
      ...
      //someDomainClass is just a reg. pojo to store your values.
      someDominClass class1 = new someDomainClass(value1, value2, value3
       , value4);
      return class1;
   }
}

您的HTML文件：

 ...
<script>
   $.ajax({
      url: "/getValues",
      type: "GET",
      success: function(result){
          //result is a json object containing your values 1..4.
      },
      failure: functtion(err){...}
   });
</script>

祝你好运:)