使用Highcharts生成柱状图

原创文章 作者:月光光 2012年01月20日 10:04helloweba.com 标签:Highcharts  统计图表 

柱状图广泛应用于数据统计和分析,它是由一系列高度不等的纵向条纹表示数据分布的情况,能够直观的表示数据间的差异。柱状图可以是纵向和横向排列,本文讲解通过Highcharts生成一个年度财经支出统计图和一个男女比例分布图。

使用Highcharts生成柱状图

1、年度财经支出统计图

通过以下配置,可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转(标签名称太长的情况)、XY轴均可放大的、去除LOGO信息的统计图表。具体请看代码和注释:

var chart;
$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_column', //图表放置的容器,关联DIV#id
            zoomType: 'xy'   //X、Y轴均可放大
            //因为是柱状图和曲线图共存在一个图表中,所以默认图表类型不在这里设置。
        },
        title: {
            text: '2011-2012年财经支出统计图' //图表标题
        },
        subtitle: {
            text: '数据来源:新浪财经'   //图表副标题
        },
		credits: {
			enabled: false   //不显示LOGO
		},
        xAxis: [{ //X轴标签
            categories: ['2010年3月', '2010年4月', '2010年5月', '2010年6月', '2010年7月',
       '2010年8月', '2010年10月', '2010年11月', '2010年12月', '2011年3月', '2011年4月', '2011年5月',
       '2011年6月', '2011年7月', '2011年8月', '2011年9月', '2011年10月', '2011年11月'],
			labels: {
				rotation: -45,  //逆时针旋转45°,标签名称太长。
				align: 'right'  //设置右对齐
			}
        }],
        yAxis: [{ //设置Y轴-第一个(增幅)
            labels: {
                formatter: function() { //格式化标签名称
                    return this.value + '%';
                },
                style: {
                    color: '#89A54E' //设置标签颜色
                }
            },
            title: {text: ''}, //Y轴标题设为空
            opposite: true  //显示在Y轴右侧,通常为false时,左边显示Y轴,下边显示X轴

        },
        { //设置Y轴-第二个(金额)
            gridLineWidth: 0,  //设置网格宽度为0,因为第一个Y轴默认了网格宽度为1
            title: {text: ''},//Y轴标题设为空
            labels: {
                formatter: function() {//格式化标签名称
                    return this.value + ' 万亿元';
                },
                style: {
                    color: '#4572A7' //设置标签颜色
                }
            }

        }],
        tooltip: { //鼠标滑向数据区显示的提示框
            formatter: function() {  //格式化提示框信息
                var unit = {
                    '金额': '亿元',
                    '增幅': '%'
                } [this.series.name];
                return '' + this.x + ': ' + this.y + ' ' + unit;
            }
        },
        legend: { //设置图例
            layout: 'vertical', //水平排列图例
			shadow: true,  //设置阴影
        },
        series: [{  //数据列
            name: '金额',
            color: '#4572A7',
            type: 'column', //类型:纵向柱状图
            yAxis: 1, //数据列关联到Y轴,默认是0,设置为1表示关联上述第二个Y轴即金额
            data: [5923.95, 5575.55, 5786.7, 8119.15, 5810.87, 6413.69, 6488.3, 10599.64, 
  17982, 7570, 7304.45, 8268, 10809.12, 6949.92, 8076.92, 10018.55, 8079.03, 11396.18] //金额数据
        },
        {
            name: '增幅',
            color: '#89A54E',
            type: 'spline', //类型:曲线图
            data: [18.3, 9.8, 25.6, 26.8, 16.6, 35.4, 38.5, 66.9, -10.4, 27.8, 31.0, 42.9, 
            33.1, 19.6, 25.9, 18.3, 24.5,7.5] //增幅数据
        }]
    });
});

2、各学院毕业生男女比例分布图

前面的例子我们都使用的是静态数据,本例中,我想通过PHP来读取mysql数据表中的数据,然后处理给Highcharts生成一个男女比例分布图。

首先,设计一张简单的表chart_student,用来存储各学院的男生女生人数。

然后,连接mysql表,读取数据:

include_once('connect.php'); //连接数据库文件
$res = mysql_query("select * from chart_student"); //查询读取chart_student
while($row = mysql_fetch_array($res)){ //循环结果集
	$college[] = $row['college'];  //获取学院名称
	$male[] = intval($row['male']);  //获取男生人数,并转换为数字整型
	$female[] = intval($row['female']); //获取女生人数,并转换为数字整型
}

本例将要通过Highcharts生成一个横向柱状图,Y轴表示学院,X轴表示各学院男女比例分布。通过上述PHP代码获取学院名称作为Y轴标签,获取各学院男生和女生数作为X轴计算比例。

接下来配置Highcharts,请看代码和注释:

var chart;
$(function() {
     chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_bar',  //图表放置的容器,关联DIV#id
            defaultSeriesType: 'bar'  //图标类型为bar,即横向柱状条形统计图
        },
        title: {
            text: '2011届毕业生各学院男女比例分布图'  //设置图表标题
        },
        xAxis: { //设置X轴
			categories: <?php echo json_encode($college); ?>  //通过PHP将读取的学院名称以JSON格式输出
        },
        yAxis: { //设置Y轴
            min: 0,  //最小值为0
            title: {text: ''}
        },
        plotOptions: { //设置数据点
            series: {
                stacking: 'percent'  //数据点关联组合,采用百分比形式
            }
        },
        series: [{
            name: '男生',
			data: <?php echo json_encode($male);?>  //通过PHP将读取的各学院男生人数并以JSON格式输出
        },
        {
            name: '女生',
			data: <?php echo json_encode($female);?> //通过PHP将读取的各学院女生人数并以JSON格式输出
        }]
    });
});

这样就生成了一张男女比例分布图,请点击这里看demo

好了,明天开始放假了,还有饼状图、区域图的例子年后奉上,在这里我祝大家春节愉快,开心过大年!

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/158.html

9条评论

  • 这个报表的数据应该可以是传一个后台的结果集吧,迭代读取数据的还是跟你的列子一样吧,,我的需求还要鼠标移到图上弹出一个浮层让选择根据那些报表数据的列去生成图,可以是总和,什么的。。

  • javascript 调用php语句应该无法执行吧

  • 这是js写的吧?为什么放到我的页面没反应呢?

  • 请问柱状图的例子没有提供套件可以download吗

  • 楼下的怎么还会有这种需求。。

  • 你好,我想做一个鼠标移动到柱状图,弹出一个方框,里面显示的是另一个图表。不知道能不能实现

  • 您好,咨询下,如果想默认的隐藏某一个数据段,,比如好几个折线,默认假设全部隐藏掉,只有在图例那边点击才显示出来,这个在代码应该要加什么参数呢?

  • 楼主能用C#,数据库SQL写个出来吗,PHP我看不懂

  • 您好!这个例子我自己试的时候发现 1: 可以在PHP部分输出数组,但在js部分无法工作 2:json_encode貌似不认中文