使用 HighCharts 动态获取后台数据生成图表

在最近的一个小项目中，因为需要统计一些数据，便想着把它做成一个图表的样式更直观的显示。因为考虑到需要在页面上灵活的展示，所以就放弃了使用 jfreechart，很早便听说过 HighCharts这个生成图表的工具，所以便去官网下载了这个工具，简单的了解了一下这个 js 工具的工作方式。

HighCharts 是一个纯 javascript 编写的图标库，能够很方便的在 web 网站或是 web 应用程序添加有交互性的图表，HighCharts 支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。我主要使用的是饼图( pie )。

在使用 HighCharts 时，我开始的时候为了测试一下配置是否正确，直接将官方文档中的 demo 拷过来执行，信心满满，可不曾想刚开始就遇到拦路虎，直接运行官方提供的 demo 居然失败了！真是百思不得其解！官方 demo 中的代码是这样的：

 $('#container').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'},title: {text: 'Browser market shares January, 2015 to May, 2015'},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{name: "Brands",colorByPoint: true,data: [{name: "Microsoft Internet Explorer",y: 56.33}, {name: "Chrome",y: 24.03,sliced: true,selected: true}, {name: "Firefox",y: 10.38}, {name: "Safari",y: 4.77}, {name: "Opera",y: 0.91}, {name: "Proprietary or Undetectable",y: 0.2}]}]});
});

其中 container 是放置这个饼图的 div 的 id。然而这个程序在我的程序中却一直无法显示，后来在 stackoverflow 上找解决办法时才知道将这个声明换成了另一种方式，代码如下：

var chart = new Highcharts.Chart({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie',renderTo: 'blogChart'},title: {text: '含各标签的博客数量统计'},credits: { text: 'www.yechoor.cn' }, tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',},showInLegend: true},},series: [{name: "blog percent",colorByPoint: true,data:jsondata}]});

顺利解决了第一个问题。

因为官方 demo 给的都是静态数据，而我们在展示时的数据肯定都是来自后台程序分析的结果，所以需要将数据从后台动态传递到前台，这里我选择了使用 json 传递。我使用的是 json.org 提供的 json 工具。后台传递代码为：

JSONObject object = new JSONObject(data);try {response.setContentType("application/json; charset=UTF-8");response.getWriter().print(object);System.out.println("key= "+object);} catch (Exception e) {}

在我的程序中 data 是一个 Map<String,Integer> 类型的数据，所以需要使用 JSONObject 对象来包装，转化为 json 格式后的数据为：

{"杂想":1,"心情":1,"ckeditor":3,"文艺":1,"随笔":1,"进步":1,"感想":1,"xheditor":2,"java":1,"测试":1,"css":1}

这个 json 格式的数据需要在前台作为生成饼图的数据来源。我的处理方式为：

success:function(result){var json = result;              var jsondata = [];              for (var i in json) {jsondata.push([i, json[i]]);}
//此处便是上面展示的生成饼图的代码
}

然后在饼图的数据来源 series 中填充这个转化后的 jsondata，代码如下：

<span style="color:#333333;"> series: [{name: "blog percent",colorByPoint: true,</span><span style="color:#ff0000;">data:jsondata</span><span style="color:#333333;">}]</span>

以上便是使用 HighCharts 动态获取后台数据生成一个饼图的 demo。

使用 HighCharts 动态获取后台数据生成图表相关推荐

ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
echarts图表动态获取后台数据详解（二）
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
ECharts 折线图柱状图混合双Y轴利用ajax动态获取后台数据
效果图示如下后台代码用的框架是SSM 双Y轴根据后台数据展示大致代码如下: List<Map> findqushi(@Param("date_id") String ...
highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据va ...
Jasper Report 6.8 根据后台数据生成动态报表（JRXML文件实现）（三）JRXML文件生成过程（支持json,bean,map list数据源）
1.生成头信息及页面 protected Element createPageXmlFileRoot( ) {DftRptMaster dftRptMaster = rptInfo.getDftRpt ...
【看板】ajax动态获取后台传来json数据，加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)
1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明使用jfree图表绘制类库绘制图表,并生成到本 ...
java实现将数据生成图表至excel导出
https://www.jianshu.com/p/6c4f3832c396 1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使 ...
vue绑定后台数据ajax,vueJS 获取后台数据绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...

使用 HighCharts 动态获取后台数据生成图表

使用 HighCharts 动态获取后台数据生成图表相关推荐

最新文章

热门文章