zoukankan      html  css  js  c++  java
  • HighCharts之气泡图

    HighCharts之气泡图


    1、HighCharts之气泡图源码

    bubble.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>HighCharts 2D气泡图</title>
    <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
    <script type="text/javascript">
    $(function(){
    	 $('#bubbleChart').highcharts({
    		 chart: {
    		        type: 'bubble',
    		        zoomType: 'xy'
    		    },
    
    		    title: {
    		    	text: '气泡图'
    		    },
    		
    		    series: [{
    		        data: [[9714,3678,7956],[1294,2374,5860],[9568,4576,1258],[4564,2587,9656],[3668,2567,7893],[2374,3699,4263],[7268,9233,8756],[2351,5669,4230],[3228,2223,3223],[5227,8126,3201]]
    		    }, {
    		        data: [[2534,1034,8347],[2566,7565,5679],[1167,5774,8776],[8776,5885,9883],[5887,3787,5788],[9078,6543,4344],[3491,3453,1457],[9547,5453,5546],[1545,6457,4458],[5554,2445,8441]]
    		    }, {
    		        data: [[4347,4457,2561],[2670,1772,4676],[6787,7666,9771],[3868,3780,6660],[5778,9768,6674],[8761,8817,3480],[8343,6450,1433],[6227,7678,7455],[6244,1562,1560],[3560,7657,8442]]
    		    }]
    		
    		});
      });
    </script>
    </head>
    <body>
       <div id="bubbleChart" style=" 1200px; height: 550px; margin: 0 auto"></div>
    </body>
    </html>

    2、运行结果



  • 相关阅读:
    CSS--盒子模型详解
    html元素分类
    HTML语义化(2016/3/16更新)
    如何在线预览github上的html页面?
    【鬼脸原创】谷歌扩展--知乎V2.0
    CSS选择器详解
    HTML基础知识
    python- 日志学习
    python-ddt 数据驱动测试
    python
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315273.html
Copyright © 2011-2022 走看看