highcharts对于饼状图的数据接口

最新推荐文章于 2022-10-19 11:20:36 发布

ryan1214

最新推荐文章于 2022-10-19 11:20:36 发布

阅读量932

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ryan1214/article/details/24231509

这篇博客介绍了如何使用Highcharts创建饼状图，并通过AJAX从后台获取数据。在前台，定义了一个名为chart2的Highcharts图表，设置各种配置项如标题、数据标签等。接着，通过jQuery的AJAX方法向后台发送POST请求，获取以JSON格式返回的损耗率数据。在后台，使用了JSONArray和JSONObject来构造数据，并将其转换为字符串返回给前端。最后，前端接收到数据后，将数据添加到图表中完成动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台

var data2=new Array(new Array(),new Array());//饼状图的数据时二维数组--------------------------------------------------------------
          var chart2 = new Highcharts.Chart({
      // $('#container2').highcharts({
           chart: {
       renderTo:'container2',
                 type: 'pie',
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false
           },
           title: {
               text: '损耗率'
           },
           tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
           },
           plotOptions: {
               pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: true,
                       color: '#000000',
                       connectorColor: '#000000',
                       format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                   }
               }
           }
       });

       $.ajax({
              type: "POST",
              url: "<%= basePath%>tu/piejson.action",
              data: "status=bingtu",
              dataType:'json',
              success: function(returndata){
                    var result = eval('(' + returndata.json + ')');
               //用

$.each( { result.data, function(i, n){
  alert( "Name: " + 就等于后台二维数组的“Opera” + ", Value: " + 等于二维数组对应的6.2 );
});

}

               chart2.addSeries({ name: result[0].name, data:data2});

              }

          });

-------------------后台

private String json;
    public String getJson()
     {
         return json;
     }

     /**
      * @param 对jsonTree进行赋值
      */
     public void setJson(String json)
     {
         this.json = json;
     }

public String initPieString() {

JSONArray gdsNodes = new JSONArray();

        JSONObject gdsNodeYear = new JSONObject();
        Object[][] array ={{"Opera",6.2},{"Others",0.7},{"Firefox",45.0},{"IE",39.6},{"Safari",8.5}};      //也是一个二维数组
        gdsNodeYear.put("name", "损耗率");
        gdsNodeYear.put("data",array);

        gdsNodes.add(gdsNodeYear);
        json = gdsNodes.toString();
        return SUCCESS;

}