使用 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}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {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}: {point.percentage:.1f}%'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {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 类型的数据，所以需要使用 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，代码如下：

 series: [{
                        name: "blog percent",
                        colorByPoint: true,
                        data:jsondata
                     }]

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