Highcharts图表-ajax-获取json数据生成图表

重点说明此代码是针对一个报表显示多个项对比显示。

直接贴代码：web端

},
                          yAxis: {
                                       min: 0,
                                       title: {
                                               text: '单位(mm)'
                                               }
                                        },
                                //x轴显示内容
                              xAxis: {
                                    categories: [ ]
                                         },
                                / /数据来源(多个对比的)
                                 series: [{},{},{},{}]
                                };
                               //json url 地址这里我使用的servlet
                                var url = "http://127.0.0.1:8080/servlet/JsonServlet";
                                $.getJSON(url,function(data) {
                                       var i,len=data.length;
                                        for( i=0;i<len;i++){

//赋值 series
options.series[i].data = data[i].list;
options.series[i].name = data[i].name;

//对报表X轴显示名称赋值
                                           options.xAxis.categories[i]=data[i].year;
                                      }
                                  var chart = new Highcharts.Chart(options);
                             });
                      });

</script>
<body>
<div id="container"></div>
</body>

后台servlet doget() 方法内容：

response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html");
    JSONArray members = new JSONArray();
    PrintWriter out= response.getWriter();
    try {
     for(int i=1;i<5;i++){

//构建JSON 对象
JSONObject member = new JSONObject();

//构建series所需参数
      member.put("name", "张飞"+i); //对应series.name
      JSONArray list = new JSONArray();//对应series.data
      for(int k=1;k<5;k++){
       list.put(k*100);
      }
      member.put("year", (2012 + i));//对应Y轴显示
      member.put("list", list);
      member.put("color", "#FF0022");//如需要可以设置柱状图颜色
      members.put(member);
     }

   out.write(members.toString());

  } catch (JSONException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

  out.flush();
  out.close();

图片为效果图：

Highcharts图表-ajax-获取json数据生成图表相关推荐

AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
Ajax 获取 JSON数据
文章目录 Ajax获取JSON数据 Ajax获取JSON数据 Ajax 全称"Asynchronous JavaScript and XML",译为"异步 JavaScr ...
使用 HighCharts 动态获取后台数据生成图表
在最近的一个小项目中,因为需要统计一些数据,便想着把它做成一个图表的样式更直观的显示.因为考虑到需要在页面上灵活的展示,所以就放弃了使用 jfreechart,很早便听说过 HighCharts这个生 ...
ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
python读excel表格数据绘制图表_Python读取Excel数据生成图表 v2.0
原博文 2020-06-15 15:09 − ## Python读取Excel数据生成图表 v2.0 ## 一.需求背景自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用 ...
ajax获取json里的list,ajax获取json数据然后将其装载到jqgrid实现
1. 通过ajax同步获取json数据 2. 本地装载jqgrid数据 $("#grid").jqGrid({ datatype: "local", data ...
jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Echarts异步加载后端接口返回的Json数据生成图表
一.Echarts 是一款很好用的前端报表制作工具,根据官网的开发文档,我们可以导入假数据制作各种分析的图表.详情看官网:Echarts官网案例.但是如果要根据实际情况导入真实的数据呢?怎么 ...
json 数据生成图表_CAPP工艺图表 / 知识重用快速编制
CAXA CAPP工艺图表致力于解决企业工艺编制阶段遇到的各种问题,提供图文混排.知识重用.工艺知识库.典型工艺.汇总统计等能力.帮助企业实现图文混排的快速工艺编制,实现关联信息同步自动修改.工艺资源 ...

Highcharts图表-ajax-获取json数据生成图表

Highcharts图表-ajax-获取json数据生成图表相关推荐

最新文章

热门文章