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. 转载 C#开发串口总结，并提炼串口辅助类到公用类库中

    C#开发串口总结,并提炼串口辅助类到公用类库中 开发C#相关的项目有很多年了,一直没有接触串口的开发,近期由于工作的需要,需要了解熟悉对硬件串口的开发,通过对串口的深入了解,串口也不再是什么神秘的东西 ...

  2. android 显示internet 图片

    try { HttpGet httpRequest = new HttpGet(edtUrl.getText() .toString()); HttpClient httpclient = new D ...

  3. Leetcode 357

    没用过Leetcode刷题,只能按照自己的想法随便写写了 思路:1.第一位数有9种(除了0)可能,第二位数有9种(除了第一位)可能,第三位数有8种(除了前两位)可能,以此类推...9*8*7*...( ...

  4. zabbix 4.0 安装配置

    1.安装软件包: 1.安装软件包: yum install -y httpd mariadb-server mariadb php php-mysql php-gd libjpeg* php-ldap ...

  5. es6函数模块-------初步学习

    初步学习: 函数参数允许尾逗号 function clownsEverywhere( param1, param2, //param2后面有逗号 ) { } 函数参数可以赋初值 利用解构赋值默认值结合 ...

  6. Codeforces Round #408 (Div. 2) D - Police Stations

    地址:http://codeforces.com/contest/796/problem/D 题目: D. Police Stations time limit per test 2 seconds ...

  7. nodejs做中间层，向后端取数据

    var  http=require('http'): http.get('http://baidu/dksapi/weiboLive/GetSquareLive?pagecount=1&pag ...

  8. Linux查找含有某字符串的文本文件

    转自:http://www.cnblogs.com/wangkongming/p/4476933.html 如果你想在当前目录下 查找"hello,world!"字符串,可以这样 ...

  9. 关于hashmap 与concurrentHashMap

    hashmap是不安全的,要实现安全,可以用Collections里面的synchronizedMap包裹来实现安全,或者用concurrentMap, 注意:hashtable是安全的 从JDK1. ...

  10. 寻路算法A*, JPS（跳点搜索）的一些杂谈

    A*是一个比较经典的启发式寻路算法.是基于dijkstra算法,但是加入了启发函数,使路径搜索效率更高.实现起来很简单.不过要做到通用性高,比如支持各种不同类型的地图,甚至不仅仅是地图,而是个图结构如 ...