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. GYM - 101490 J Programming Tutors (匈牙利+二分)

    题意:有N个学生和N个老师,每个人都有自己的坐标X,Y,给每个学生匹配一个老师,要求N个匹配中的距离最大值最小.其中距离的定义为:|X − X’| + |Y − Y ‘|. 分析:一道典型的最大值最小 ...

  2. C#小票打印机动态纸张尺寸

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. windows上使用clang编译程序

    环境:windows7,64位 1.下载并安装llvm,安装包里除了llvm,也有clang: http://releases.llvm.org/5.0.0/LLVM-5.0.0-win64.exe ...

  4. 如何释放linux cache占用的内存

    [root@prd-fygl-app-01 ~]# free -m             total       used       free     shared    buffers     ...

  5. 联想笔记本电脑的F1至F12键盘问题。怎么设置才能不按FN就使用F1

    在BIOS中有相应调整开关,开机时进入BIOS----CONFIG----Keyboard/Mouse----Change to "f1-f12 keys"选项设置为Legacy ...

  6. Jquery7 表单选择器

    学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用 jQuery 为表 ...

  7. mysql的空闲8小时问题

    在spring中配置数据源时,必须设定destroy-method="close"属性,以便spring容器关闭时,数据源能正常关闭. 如果数据库时mysql,如果数据源配置不当, ...

  8. centos redis 3.2.11 安装与配置

    centos 7 下载解压 wget http://download.redis.io/releases/redis-3.2.11.tar.gz tar xzf redis-3.2.11.tar.gz ...

  9. vscode + angular

    0.在命令行中,cd到项目下执行: npm install 1.调试->启动调试->node.js, 会生成.vscode/launch.json文件 2.修改launch.json文件& ...

  10. ubuntu16.04 python3.5 opencv的安装与卸载(转载)

    转载https://blog.csdn.net/qq_37541097/article/details/79045595 Ubuntu16.04 自带python2.7和python3.5两个版本,默 ...