jquery图表统计插件-highcharts详解

最新推荐文章于 2021-12-19 10:00:24 发布

weixin_33697898

最新推荐文章于 2021-12-19 10:00:24 发布

阅读量129

点赞数

文章标签： xhtml javascript json ViewUI

代码实例：

<!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, 
                            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 style="">
    <!-- 装载图表的容器 --> 
    <div id="container" style="width: 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',

----------------------------------------------