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. JS正则表达式从入门到入土(1)—— REGEXP对象

    REGEXP对象 JavaScript通过内置对象RegExp支持正则表达式,有两种方法实例化RegExp对象. 1.字面量 2.构造函数 字面量 字面量是直接通过/.../创建RegExp对象实例. ...

  2. C#创建类,方法,接口,字段 的 默认类型

    1.在namespace中的类.接口默认是internal类型的,也可以显示的定义为public类型2.在一个类里面,属性和方法默认是private的,可以显示的定义为public.private.p ...

  3. Java实现:服务端登录系统并跳转到系统内的指定页面(不调用浏览器)

    Java实现:服务端登录系统并跳转到系统内的指定页面(不调用浏览器) 1,思路:根据爬虫思想: 2,代码: /** * ClassName:AuthFr * Function: TODO * Reas ...

  4. 20145230熊佳炜《网络对抗》实验八:WEB基础

    20145230熊佳炜<网络对抗>实验八:WEB基础 实验目标 Web前端HTML:能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTM ...

  5. MySQL中变量的用法——LeetCode 178. Rank Scores

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  6. LeetCode (262):Nim Game

    You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...

  7. mfc配置CAN通信

    配置:把kerneldlls文件夹.ControlCAN.dll.ControlCAN.lib放在工程下面(debug和Release下面,最后需要exe和这些文件在一起):右键工程属性,链接器-&g ...

  8. 访问ashx一般应用程序

    浏览器中的地址栏键入要访问页面的地址:回车(是和服务器软件打交道)----向服务器发送请求(以http协议为基础,服务器按照此协议解释理解接收到的数据),服务器接收到发送的请求,根据请求信息知道当前所 ...

  9. Centos7 ActiveMQ 安装并配置为开机启动

    第一步, 环境准备 更新CentOS7 ,安装epel-release,安装JDK,关闭防火墙 # yum clean all && yum update# yum install - ...

  10. uboot向linux传递输出任何log信息的方法

    答案:在bootargs中加入loglevel=8即可(在进入linux的过程中会输出任何log信息)