Highcharts 气泡图

配置

chart 配置

配置 chart 的 type 为 'bubble' 。chart.type 描述了图表类型。默认值为 "line"。

chart.zoomType 属性可配置图表放大 ，通过拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy'。

var chart = {

   type: 'bubble',

   zoomType: 'xy'

};

实例

文件名：highcharts_bubble_basic.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-more.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'bubble',

      zoomType: 'xy'

   };

   var title = {

      text: 'Highcharts Bubbles'

   };

   var series= [{

            data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]

        }, {

            data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]

        }, {

            data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]

      }

   ];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

 

 
 
 
 

3D 气泡图

series.marker

设置 series.marker 渐变让其看起来有 3D 的效果。

marker: {

   fillColor: {

      radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },

      stops: [

         [0, 'rgba(255,255,255,0.5)'],

         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]

      ]

   }

}

实例

文件名：highcharts_bubble_3d.htm

<html>

<head>

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

   <script src="/try/demo_source/highcharts.js"></script>

   <script src="http://code.highcharts.com/highcharts-more.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'bubble',

      plotBorderWidth: 1,

      zoomType: 'xy'

   };

   var title = {

      text: 'Highcharts bubbles with radial gradient fill'

   };

   var xAxis = {

      gridLineWidth: 1

   };

   var yAxis = {

      startOnTick: false,

      endOnTick: false

   };

   var series= [{

           data: [

                [9, 81, 63],

                [98, 5, 89],

                [51, 50, 73],

                [41, 22, 14],

                [58, 24, 20],

                [78, 37, 34],

                [55, 56, 53],

                [18, 45, 70],

                [42, 44, 28],

                [3, 52, 59],

                [31, 18, 97],

                [79, 91, 63],

                [93, 23, 23],

                [44, 83, 22]

            ],

            marker: {

                fillColor: {

                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },

                    stops: [

                        [0, 'rgba(255,255,255,0.5)'],

                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]

                    ]

                }

            }

        }, {

            data: [

                [42, 38, 20],

                [6, 18, 1],

                [1, 93, 55],

                [57, 2, 90],

                [80, 76, 22],

                [11, 74, 96],

                [88, 56, 10],

                [30, 47, 49],

                [57, 62, 98],

                [4, 16, 16],

                [46, 10, 11],

                [22, 87, 89],

                [57, 91, 82],

                [45,15,98]],

            marker:{

                fillColor:{

                    radialGradient:{ cx:0.4, cy:0.3, r:0.7},

                    stops:[[0,'rgba(255,255,255,0.5)'],[1,Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]]}}}];var json ={};

   json.chart = chart;

   json.title = title;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.series = series;

   $('#container').highcharts(json);});</script></body></html>

尝试一下 »

以上实例输出结果为：

 

Highcharts 气泡图的更多相关文章

  1. HighCharts之气泡图

    HighCharts之气泡图 1.HighCharts之气泡图源码 bubble.html: <!DOCTYPE html> <html> <head> <m ...

  2. HighCharts之气泡图报错

    HighCharts之气泡图报错 具体报错如下: uncaught exception: Highcharts error #17: www.highcharts.com/errors/17     ...

  3. Highcharts中文网

    官网地址: http://www.hcharts.cn/ http://www.hcharts.cn/p/highchartTable.php 名词解释 英文名  中文名 描述  更多 lang 语言 ...

  4. Highcharts下载与使用_数据报表图

    Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...

  5. Highcharts教程

    Highcharts特性: 兼容性 - 支持所有主流浏览器和移动平台(android.iOS等). 多设备 - 支持多种设备,如手持设备 iPhone/iPad.平板等 免费使用 - 开源免费 轻量 ...

  6. 应用highcharts做直观数据统计

    最近在看上了统计类的东东,发现以前端图表神器:highcharts Highcharts是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯Js图表库,Highcharts支持的图表类型有直线 ...

  7. 使用highcharts绘制美观的燃尽图

    使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...

  8. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  9. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

随机推荐

  1. quick cocos2d-x 下载地址

    https://github.com/chukong/quick-cocos2d-x/tree/master http://www.cocos2dx.net/post/280 配置说明 http:// ...

  2. window7主题破解与恢复（复制）

    window7主题破解与恢复 1 2 3 分步阅读 windows7主题破解后可以换自己喜欢的主题,但也有一些弊端.这里帮助打家破解与恢复. 工具/原料 UniversalThemePatcher.e ...

  3. obj比较

    <script> var obj1={name:'one',age:30}; var obj2={name:'one',age:30}; //比较两个字符串对象的[值]是否相等 Objec ...

  4. java5引入的并发编程库

    java5之后引入了java.util.concurrent包,专门用于解决java多线程问题.   AtomicInteger用于解决原子性操作(i++,i--的问题): AtomicInteger ...

  5. Docker-docker镜像

    前言 在 Docker 1.13+ 版本中推荐使用 docker image 来管理镜像. 查看安装的Docker版本信息: [dockuser@localhost Desktop]$ docker ...

  6. Visual Studio 2015 初体验

    据微软介绍每次发布的新版本,都承载着为开发者提供最高效的Visual Studio开发体验的使命.Visual Studio 2015亦延续了这一趋势,为开发者带来了进一步的生产力创新,包括调试和诊断 ...

  7. 20135302魏静静——linux课程第七周实验及总结

    linux课程第七周实验及总结 实验及学习总结 1. 编译链接的过程和ELF可执行文件格式(以hello为例) GNU编译系统编译源码: 首先,运行C预处理器(cpp),将.c文件翻译成.i文件——g ...

  8. db2 xml 转 table

    版本:DB2 Version 9.1 1.创建测试表,初始化数据 create table emp (doc XML); INSERT INTO EMP VALUES ('<dept bldg= ...

  9. MySQL修改max_allowed_packet

    因mysql从库报错Last_IO_Error: Got a packet bigger than 'max_allowed_packet' bytes mysql> show slave st ...

  10. tomcat监控，自动重启shell脚本

    tomcat监控,自动重启shell脚本如下,取名 monitor_tomcat.sh: #!/bin/sh # func:自动监控tomcat脚本并且执行重启操作 # 获取tomcat进程ID(其中 ...