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. nginx 413文件上报太大

    在nginx使用过程中,上传文件的过程中,通常需要设置nginx报文大小限制.避免出现413 Request Entity Too Large. 于是奇葩的问题被我们遇到了,详细配置请参考下面.我们的 ...

  2. Spring自动装配Bean的五种方式

    在Spring中,支持 5 自动装配模式. no – 缺省情况下,自动配置是通过“ref”属性手动设定,在项目中最常用byName – 根据属性名称自动装配.如果一个bean的名称和其他bean属性的 ...

  3. 7. Reverse Integer（翻转整数）

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  4. Spring-1-I 233 Matrix（HDU 5015）解题报告及测试数据

    233 Matrix Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Descript ...

  5. Oracle中的substr()函数详解案例

    1)substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int a, int b); 格式2:substr(string string, int a ...

  6. JQuery的click、bind、delegate、off、unbind

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

  7. CSS Ul（列表样式）

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  8. Codeforces 235C. Cyclical Quest

    传送门 写的时候挺蛋疼的. 刚开始的时候思路没跑偏,无非就是建个SAM然后把串开两倍然后在SAM上跑完后统计贡献.但是卡在第二个样例上就是没考虑相同的情况. 然后开始乱搞,发现会出现相同串的只有可能是 ...

  9. 20145302张薇《Java程序设计》第四周学习总结

    20145302 <Java程序设计>第四周学习总结 教材学习内容总结 第六章 继承共同行为 面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承. 程序代 ...

  10. 防止xss(脚本攻击)的方法之过滤器

    一  什么是脚本注入 概念我就不说了 直接百度一份 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端 ...