Highcharts

Highcharts 简介：

Highcharts 是一个用纯JavaScript编写的一个图表库。
Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 所需的在线资源库：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

编写代码

html：

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

javascript：

$(function(){
        var x = [];//X轴
        var y = [];//Y轴
        var xtext = [];//X轴TEXT
        var color = ["gray","pink","red","blue","yellow","green","#fff"];
        $.ajax({
            type:'get',
            url:'/chart',//请求数据的地址
            success:function(data){
                $(data).each(function (i) {
                    this.y = this.age; //给Y轴赋值
                    xtext = this.name;//给X轴TEXT赋值
                    this.color= color[i];
                })
                chart.series[0].setData(data);//数据填充到highcharts上面
            },
            error:function(e){
                alert('err')
            }
        });
        var chart = new Highcharts.Chart({
            chart:{
                renderTo:'container',
                type:'column' //显示类型 柱形
            },
            title:{
                text:'年龄分布图' //图表的标题
            },
            xAxis:{
                categories:xtext
            },
            yAxis:{
                title:{
                    text:'年龄' //Y轴的名称
                },
            },
            series:[{
                name:"姓名"
            }]
        });
    });

后台代码不限

本次查询出的josn如下：

[{"id":1,"name":"zhang","age":18},{"id":2,"name":"li","age":21},{"id":3,"name":"wang","age":24},{"id":4,"name":"zhao","age":22},{"id":5,"name":"liu","age":21}]