最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

highcharts柱状图

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-13 22:05浏览(1806)

今天介绍一款统计图插件:Highcharts。通过它生成一个季节平均降雨量柱状统计图。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

highcharts柱状图
分类:其它特效 > 统计图 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

首先我们引入jQuery库和hightcharts相关插件:

<script src="js/highcharts.js"></script>
<script src="js/modules/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: '来源: erdangjiade.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.9, 71.5, 106.4, 129.2] //数组或JSON,如:data:[0, 5, 3, 5],或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
        },
        {
            name: '浙江',
            data: [83.6, 78.8, 98.5, 93.4]

        },
        {
            name: '山东',
            data: [48.9, 38.8, 39.3, 41.4]

        },
        {
            name: '广东',
            data: [42.4, 33.2, 34.5, 39.7]

        }],
        credits: {
            enabled: false //不显示highCharts版权信息
        },
        exporting: {
            enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示
        },
    });
});

这样就生成了一张季节平均降雨量柱状统计图,请点击这里看demo。想要更了解highcharts,请点击查看highcharts选项配置文档说明

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/48.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2