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. HDU 1116 Play on Words(欧拉路径(回路))

    http://acm.hdu.edu.cn/showproblem.php?pid=1116 题意:判断n个单词是否可以相连成一条链或一个环,两个单词可以相连的条件是 前一个单词的最后一个字母和后一个 ...

  2. vue的ref与$refs

    一. ref使用在父组件上 父组件html: <information ref='information'></information> import information ...

  3. python之路 django基础

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  4. hust1010 The Minimum Length

    地址:http://acm.hust.edu.cn/problem/show/1010 题目: 1010 - The Minimum Length Time Limit: 1s Memory Limi ...

  5. codeforces 70 D. Professor's task 动态凸包

    地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...

  6. 20145302张薇《Java程序设计》第十六周课程总结

    20145302 <Java程序设计>第十六周课程总结 实验报告链接汇总 实验一 Java开发环境的熟悉 实验二 Java面向对象程序设计 实验三 敏捷开发与XP实践 实验四 Andoid ...

  7. 机器学习：让我们彻底搞懂CNN【转】

    本文转载自:http://115.com/182920/T1266078.html 机器学习:让我们彻底搞懂CNN 上世纪科学家们发现了几个视觉神经特点,视神经具有局部感受眼,一整张图的识别由多个局部 ...

  8. SaltStack日常维护-第七篇

    练习内容 远程执行其他模块 官方模块有很多超过300+ 1.cmd.run 2.network 3.service 4.state 5.其它日常维护 演示 cmd.run模块 可以执行系统命令,超级模 ...

  9. 第九篇：Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 cache table

    /** Spark SQL源码分析系列文章*/ Spark SQL 可以将数据缓存到内存中,我们可以见到的通过调用cache table tableName即可将一张表缓存到内存中,来极大的提高查询效 ...

  10. 关于Visual Studio 2010自动添加头部注释信息

    作为一个万年潜水党,不关这一篇文章技术含量如何,也算是一个好的开始吧.   在日常的开发中我们经常需要为类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们 ...