highcharts柱状图

2267

HTML

首先我们引入jQuery库和hightcharts相关插件: 点击下载:down.zip

<script src="highcharts.js"></script> 
<script src="exporting.js"></script>

接着我们在页面上放置一个div#highcharts,用来生成统计图的区域。

<div class="demo" id="highcharts"></div>

jQuery

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

$(function() { 
    $('#highcharts').highcharts({ 
        chart: { 
            type: 'column' 
        }
        title: { //标题 
            text: '季节平均降雨量' 
        }
        subtitle: { //副标题 
            text: '来源: sucaihuo.com' 
        }
        xAxis: { //X轴选项 
            categories: [ //设置X轴分类名称 
            '春季''夏季''秋季''冬季', ] 
        }
        yAxis: { //Y轴选项 
            min: 0
            //Y轴最小值 
            title: { //Y轴标题 
                text: '降雨量 (mm)' 
            } 
        }
        tooltip: { //数据点提示框 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等 
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>'
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>'
            footerFormat: '</table>'
            shared: true, 
            useHTML: true 
        }
        plotOptions: { //数据点选项 
            column: { 
                pointPadding: 0.2
                borderWidth: 0 
            } 
        }
        series: [{ //数据列选项 
            name: '江苏'
            //显示数据列的名称 
            data: [49.971.5106.4129.2//数组或JSON,如:data:[0, 5, 3, 5],或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] 
        }
        { 
            name: '浙江'
            data: [83.678.898.593.4
 
        }
        { 
            name: '山东'
            data: [48.938.839.341.4
 
        }
        { 
            name: '广东'
            data: [42.433.234.539.7
 
        }], 
        credits: { 
            enabled: false //不显示highCharts版权信息 
        }
        exporting: { 
            enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示 
        }
    }); 
});


PHP饼状图 http://www.blogxuan.com/php/show/293.html