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. 微信小程序组件loading

    操作反馈loading:官方文档 Demo Code: Page({ data: { hidden: true }, loadingChange: function () { console.log( ...

  2. Discuz! 论坛

      Discuz! 是腾讯旗下 Comsenz 公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务.让论坛(BBS).个人空间(SNS).门户(Portal).群组(Group).应用开放平 ...

  3. 百度nlp实习生转岗（猝）

    一面: 大部分是问项目相关的.只记住了几个关键的问题. 1.手写快排 2.生成模型与判别模型的区别 分类问题:2种形式: F(x)=y p(y|x) 生成模型:由数据学习联合分布概率p(x,y),然后 ...

  4. mysql中explain的用法

    mysql中explain的用法 最近在做性能测试中经常遇到一些数据库的问题,通常使用慢查询日志可以找到执行效果比较差的sql,但是仅仅找到这些sql是不行的,我们需要协助开发人员分析问题所在,这就经 ...

  5. git 移除某个文件的版本管理

    1:最简单的,在项目刚创建的时候,在根目录的.gitignore,加入该文件的相对路径 2:已经被纳入到了版本控制,使用在当前目录下,打开cmd窗口 输入rm命令,加上文件的绝对路径(相对路径没试过) ...

  6. 资料：mnist.pkl.gz数据包的下载以及数据内容解释

    deeplearning.net/data/mnist/mnist.pkl.gz The MNIST dataset consists of handwritten digit images and ...

  7. DbEntry 4.2 建立关系时的一些问题

    创建关系提示输入字符串的格式不正确 使用HasMany Attribute时,需要将属性访问器的set部分修改为private,否则会提示输入字符串的格式不正确 [HasMany(OrderBy = ...

  8. web.py url传参及获取

    第一种:直接获取: import web urls = ( '/(.*)','index' #URL后面必须加(.*) ) class index: def GET(self,name): print ...

  9. linux ftp 简单搭建

    1.安装 yum install vsftpd 2.重启服务 /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vsft ...

  10. 学习Windows（BAT）、Linux（Shell）编程，并分别写一个脚本文件解决自己的一个问题

    delete: @echo off echo Press any key to delete this file.pause del %0 ip: @echo off color a Title 端口 ...