jquery图表统计插件-highcharts详解

djw0101

浏览: 73852 次
性别:
来自: 广州

最近访客更多访客>>

globle123

lvbomr

will_lp

xiaoshi_love

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>渠道流量统计</title>
    <style type="text/css">
     body {margin: 0; padding: 0;}
    </style>
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        
        <script src="highcharts.js" type="text/javascript"></script>
        
        <script src="grid.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {  //整体控制
                        renderTo: 'container',  //图表容器的DIVbar:横向条形图
                        defaultSeriesType: 'line', //可选，默认为line【line:折线;spline:平滑的线;area:区域图;bar:曲线图;pie:饼图;scatter:点状图等等;
                        marginRight: 130, //外边距控制 (上下左右空隙)
                        marginBottom: 25  //外边距控制
                    },
                    title: {
                        text: '渠道流量统计', //主标题
                        x: -20            //标题相对位置  默认居中
                    },
                    subtitle: {
                    text: '趋势图',//副标题
                    x: 60           //标题相对位置
                    },
                    xAxis: {          //x轴数据
                        categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                    },
                    yAxis: {          //y轴数据
                        title: {
                            text: '标量'
                        },
                        plotLines: [{  //标线
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {        //数据点的提示框
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
                        }  //formatter需要一个回调函数，可以通过this关键字打点得到当前一些图表信息
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{   //数据数组,json格式中name为这组数据的名字，data为这组数据的数组
                        name: '渠道一',
                        data: [2,7,9,25,31,32,9]
                    }, {
                        name: '渠道二',
                        data: [6,14,19,23,25,32,12]
                    }, {
                        name: '渠道三',
                        data: [7,16,17,20,25,26,4]
                    }, {
                        name: '渠道四',
                        data: [7,16,18,24,28,29,6]
                    }, {
                        name: '渠道五',
                        data: [9, 10, 12, 16, 18, 32, 15]
                    }]
                });

            });
        </script>
    </head>
    <body>
       
        <div id="container" style="width: 100%; height: 600px">
        </div>
    </body>
    </html>

    1.如何去掉右下角的 http:// www.highcharts.com标识：
   在highcharts.js中找到：
   credits: {
        enabled: true,
        text: 'Highcharts.com',
        href: 'http://www.highcharts.com',
        position: {
            align: 'right',
            x: -10,
            verticalAlign: 'bottom',
            y: -5
        }
   只要改掉这个地方就行了，或者直接取消，enabled:false
    或者
       text: 'yourself.com',
        href: 'http://www.yourself.com',

分享到：

org.hibernate.exception.JDBCConnectionEx ... | apache 自带的ab.exe 测试网站的并发量( ...

2011-11-04 11:40
浏览 2721
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论