highcharts 小实例 很适合初学者

发布时间:2020-07-21 11:23:03 作者:yanchuan1990
来源:网络 阅读:841

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    <title></title>

    <script type="text/javascript" src="hjs/jquery-1.8.0.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="hjs/highcharts-all.js" charset="UTF-8"></script>

    <style type="text/css">

        *{margin:0;padding:0;border:0;font-size:17px;}

        a{

            text-decoration: none;

            color: black;

        }

        #container{

            margin: 10px;

            height: 800px;

            width: 320px;

        }

        .wenBen{

            background-color: green;

            font-family: "Microsoft Yahei";

            font-size: 14px;

        }

    </style>

</head>

<body>

<div id="container"></div>

<!--<div id="pie"></div>-->

</body>

<script type="text/javascript">

    $('#container').css({ "width": $(window).width()-20, "height": $(window).height() });


    //alert(8888);

    var aa = [];

    var XX = [];

    var bb = [];

    var name = [];

    function getX(){

        for(var i =1;i<=24;i++){

            XX.push(i);

        }

        return XX;

    }

    function getName(){

        for(var i =1;i<=24;i++){

            //var oo = 'name'+i;

            name[i-1] = 'name'+i;

        }

        return name;

    }

    function getY(){

        for(var i =1;i<=24;i++){

            aa.push(parseInt(i*Math.random(i)*10));

        }

        return aa;

    }

    function getZ(){

        for(var i =1;i<24;i++){

            bb.push(i*10);

        }

        console.info(bb);

        return bb;

    }


    $(function(){

        var options ={

            //图标区

            chart:{

              renderTo: 'container',//呈现区域

              type:'line'

              //inverted: true

            },

            //标题

            title:{

                text:"我是标题"

            },

            //数据提示框

            tooltip:{

                enabled:true

            },

            //图例选项

            leglend:{


            },

            xAxis:{

                categories:getX(),

                labels:{

                    rotation: 90

                }

            },

            yAxis:{

                min:0,

                //categories:["www","odoo","ssss"],//getX(),

                labels:{

                    align:'left'

                },

                title:{

                    align:'middle',

                    text:' ',

                    style:{

                        color:'red',

                        fontSize:'5px'

                    }

                    //allowDecimals:false//不要小数设置

                },

                lineWidth:2,

                //tickWidth:10,//刻度宽

                tickColor:'#F7F8FC',

                tickLength:30,

                tickInterval: 50,//等分

                max:400,

                gridLineWidth: 0

                //max:31

            },

            series:[{

                name:"GGG",

                type:'pie',

                data:getZ(),

                color: '#ddd',

                events:{

                    click:function(event){

                        alert("点击事件被触发");

                    }

                }

                },{

                name:"线",

                data:getY(),

                color:'#6F0A1C'

            }],

            labels:{

                items:[{

                    //标签

                    html:'<p class="wenBen" >ahahhahaha</p>',

                    style:{

                        //标签位置

                        left:'50px',

                        top:'50px'

                    }

                }]

            },

            //绘图 具体的某一个点

            plotOptions:{

                series:{

                    //点 标记

                    marker:{

                        enabled:false,

                        lineColor:'#F93B08',

                        fillColor:'#719FC3',

                        lineWidth:0.1

                    },

                    cursor: 'pointer',

                    events: {

                        click: function(event) {

                            alert(this.name +' clicked\n');

                        }

                    }

                }

            },

            //版权

            credits:{

                //enabled:false // 禁用版权信息

                text:'第一版@deppon.com',               // 显示的文字

                href:'www.deppon.com',   // 链接地址

                position:{                          // 位置设置

                    align: 'left',

                    x: 500,

                    verticalAlign: 'bottom',

                    y: -50

                },

                style: {                            // 样式设置

                    cursor: 'pointer',

                    color: 'red',

                    fontSize: '10px'

                }

            },

            exporting:{

            enabled:false

            }

        };

        var chart = new Highcharts.Chart(options);

    });

</script>


</html>


推荐阅读:
  1. highcharts.js数据绑定方式代码实例
  2. 如何在vue项目中引入highcharts图表

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

实例 初学 highcharts

上一篇:Python爬虫requests库的使用方法

下一篇:如何使用H5的sse服务器发送事件EventSource

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》