中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

highcharts 小實例 很適合初學者

發布時間:2020-07-21 11:23:03 來源:網絡 閱讀:841 作者:yanchuan1990 欄目:開發技術

<!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>


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

凤凰县| 营山县| 裕民县| 峨山| 大厂| 读书| 高密市| 广南县| 青海省| 洪江市| 铁岭县| 托克逊县| 镇沅| 桓台县| 文山县| 北京市| 合肥市| 广水市| 壤塘县| 乌什县| 新民市| 河北区| 交口县| 黎城县| 喀喇沁旗| 南皮县| 鄂托克前旗| 崇义县| 梁山县| 唐河县| 乌审旗| 鄯善县| 全州县| 三门县| 西贡区| 卫辉市| 班玛县| 当阳市| 民勤县| 沂源县| 肇庆市|