highChart图表

　　Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。多了不说，举个例子说明:

1.柱状图

<script type="text/javascript">
    $(function () {
        $.post("${pageContext.request.contextPath}/workordermanage_chart.action",function(data){
             $('#container').highcharts({
                    chart: {
                        type: 'column',
                        margin: '75',
                        options3d: {
                            enabled: true,
                            alpha: 10,
                            beta: 25,
                            depth: 70
                        }
                    },
                    title: {
                        text: '3D 图表'
                    },
                    subtitle: {
                        text: '月份统计图'
                    },
                    plotOptions: {
                        column: {
                            depth: 25
                        }
                    },
                    xAxis: {
                        categories: Highcharts.getOptions().lang.shortMonths
                    },
                    yAxis: {
                        opposite: true
                    },
                    series: [{
                        name: '工作单量',
                        data: data
                    }]
                });
            
            
        });
});
        </script>

这里主要是通过ajax技术，得到的是一个json数据。值得注意的是，服务端放入值栈的数据是一个一维数组。如下所示：

@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")//放在Action类声明
//=====================================================
@Action(value="workordermanage_chart")
    public String countChart(){
        int[] monthCount={1,2,3,4,5,6,7,8,9,10,11,12};
        getValueStack().push(monthCount);
        return "json";
    

这样，就可以得到一个简单大方的图表了。具体的示例在highchart的example文件夹下方，这里主要是强调的到数据的一种方式--即通过ajax的到。

2.饼状图

实现代码和上面柱状图，差不多是一致的，主要是在服务端封装数据的时候，也就是往值栈中压数据的时候，需要及其注意。

看highchart示例中，需要的数据格式为：

data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]

根据分析和经验我们知道，这是一个二维数组的json形式。

所以，当我们在客户端使用ajax请求数据时，服务端需要把一个二维数组压入值栈返回。

返回的数据形式同柱状图，也是json数据。

如下形式：

@Action(value="workordermanage_findsendcity")
    public String findsendCityByWorkOrderManage(){
        List<Object[]> list=new ArrayList<Object[]>();
        Object[] obj1={"上海",100};
        Object[] obj2={"北京",98};
        Object[] obj3={"天津",100};
        Object[] obj4={"石家庄",98};
        Object[] obj5={"郑州",98};
        
        list.add(obj1);
        list.add(obj2);
        list.add(obj3);
        list.add(obj4);
        list.add(obj5);
        getValueStack().push(list);
        return "json";
    }

这样，既可以得到一个简单的饼状图了。

总结：highChart使用起来非常方便，需要清楚和注意的是生成图表所需要的数据格式。