位置：网站建设 > 技术支持 > jquery图表统计插件-highcharts详解

jquery图表统计插件-highcharts详解

来源：网络整理时间：2023/2/14 0:17:16 共 3655 浏览

<!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>
    效果如下：

   其实大多数blog的博文都没有对这个插件进行深入探究，估计大家都没时间吧！
我先补充点，以后慢慢再发现：
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',

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery动态添加删除select项 | ·下一条：MVC 文本编辑器在提交的时候出现检测到有潜在危险的Request.Form 值