zoukankan      html  css  js  c++  java
  • jquery图表统计插件highcharts详解

    代码实例:

    <!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>
            <!--引入jquery插件-->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
             <!--引入highchart插件-->
            <script src="http://www.cnblogs.com/js/highcharts.js"></script>
            <!--引入highchart主题-->
            <script src="http://www.cnblogs.com/js/modules/exporting.js"></script>
            <!--调用数据,生成chart-->
            <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, 
                                 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 style="">
        <!-- 装载图表的容器 --> 
        <div id="container" style=" 100%; height: 500px;"></div> 
    </body> 
    </html>

    问题:

    如何去掉右下角的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',
      ----------------------------------------------

    转自:http://djw0101.iteye.com/blog/1235005

  • 相关阅读:
    漫谈企业级SaaS的多租户设计
    网易实战分享|云信IM SDK接口设计实践
    WebRTC系列之音频的那些事
    如何科学地完成一场 AR 发布会?全在这份超细节活动策划 Xmind 里了
    移动社交如何玩?网易云信携手崽崽和Uki打造更多新场景!
    行业观察|智慧屏集中爆发,大屏市场能否迎来破局者?
    Docker文件系统实战
    文字检测模型EAST应用详解 ckpt pb的tf加载,opencv加载
    opencv dnn加载EAST的pb模型的一点问题
    百度开源:PaddleOCR与PaddlePaddle / paddle2onnx 实践一
  • 原文地址:https://www.cnblogs.com/tv151579/p/3034707.html
Copyright © 2011-2022 走看看