Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新版本v8.0.0发布,添加了带有动画的数据排序等新功能,并修复了一些BUG。戳此处查看详情!

具有自动调整范围的演示

带有气泡图例的演示,其样式与该系列类似

带范围的演示

安装需要highcharts-more.js。要显示气泡图例,请设置legend.bubbleLegend.enabled为true。

配置

的代码bubbleLegend很容易设置,并且可以进行很多自定义。选项的一部分(如minSize, maxSize,  sizeBy)和大小计算方法的工作方式与气泡系列相同。

默认样式设置来自第一个可见气泡系列。气泡图例元素在图表上的位置由图例位置定义。

用例

有两种方法可以将气泡图例添加到图表中:

1.自动:不定义范围。在图例中创建三个气泡,最小和最大气泡的大小和值与气泡系列中的气泡相同(包括所有气泡系列)。中间的气泡具有其他两个气泡的平均值。如果图表上只有一个气泡点,则气泡图例也将只有一个气泡。

{

chart: {

type: 'bubble'

},

legend: {

bubbleLegend: {

enabled: true

}

},

series: [{

data: [

[9, 81, 63],

[98, 5, 89],

[51, 50, 73],

[41, 22, 14],

[58, 24, 20]

]

}]

}

2.自定义:具有手动定义的范围。气泡是根据,和计算的ranges,不包括气泡系列尺寸。minSizemaxSize

{

chart: {

type: 'bubble'

},

legend: {

bubbleLegend: {

enabled: true,

minSize: 20,

maxSize: 60,

ranges: [{

value: 14

}, {

value: 89

}]

}

},

series: [{

minSize: 20,

maxSize: 60,

data: [

[9, 81, 63],

[98, 5, 89],

[51, 50, 73],

[41, 22, 14],

[58, 24, 20]

]

}]

}

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

0

好文不易,鼓励一下吧!

java 气泡图_JavaScript图表库Highcharts入门教程(八):气泡图相关推荐

  1. python使用教程pandas-Python 数据处理库 pandas 入门教程基本操作

    pandas是一个Python语言的软件包,在我们使用Python语言进行机器学习编程的时候,这是一个非常常用的基础编程库.本文是对它的一个入门教程. pandas提供了快速,灵活和富有表现力的数据结 ...

  2. JQuery图表插件Highcharts示例教程

    JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...

  3. jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程

    JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...

  4. 【STM32】标准库与HAL库对照学习教程八--串口通信详解

    [STM32]标准库与HAL库对照学习教程八--串口通信详解 一.前言 二.准备工作 三.通信的基本概念 1.通信方式 2.串行通信与并行通信 (1)串行通信 (2)并行通信 3.异步通信与同步通信 ...

  5. java编程输出平行四边形_JAVA语言入门教程之打印图形实例——打印平行四边形...

    本文主要向大家介绍了JAVA语言入门教程之打印图形实例--打印平行四边形,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 输出平行四边形: public class Parallelo ...

  6. python做数据处理软件_程序员用于机器学习编程的Python 数据处理库 pandas 入门教程...

    入门介绍 pandas适合于许多不同类型的数据,包括: · 具有异构类型列的表格数据,例如SQL表格或Excel数据 · 有序和无序(不一定是固定频率)时间序列数据. · 具有行列标签的任意矩阵数据( ...

  7. java语言打印图形_JAVA语言入门教程之打印图形实例——打印矩形

    本文主要向大家介绍了JAVA语言入门教程之打印图形实例--打印矩形,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 输出矩形: public class Rect { public s ...

  8. python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法

    在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如何实现这样的气泡图.今天,学习啦小编就教大家在Excel图表中制作中国地图为背景气泡图的操作方法. Exc ...

  9. java 字符界面 curses_[C++]Linux之图形界面编程库[curses库]之入门教程

    0. 环境 x86 / 64bit Linux Ubuntu 16.04 1. 安装 //方法一 sudo apt-get install libncurses5-dev [ ubuntu 16.04 ...

最新文章

  1. Flutter瀑布流及通用列表解决方案
  2. 利用VC++实现局域网实时传输
  3. 2019年9月中国编程语言排行榜,C#排第三
  4. 2021中国数字服务大会 | 阿里云混合云新一代运维演进与实践
  5. python获取html文本框内容_Python3处理HTML获取所需内容
  6. 帆软动态分页之嵌套自定义参数据选择行数分页
  7. 归并排序(包含逆序数对的个数51Nod1019)
  8. dac生成信号频率取决于_关于高速AD/DAC测量及设计中82个疑难问题的解答
  9. 开源自主导航小车MickX4(五)gmapping建图
  10. Ubuntu 14.04.2 系统无线网络不稳定问题
  11. IPv6的思科培训启用SSH在Cisco IPv6路由器
  12. 用什么工具可以批量查询韵达快递
  13. 【专家观点】超大规模数据要素市场体系下数据价格生成机制研究
  14. 颜值,自拍,美学三大任务简介和数据集下载
  15. RHCE 第八次作业
  16. 阿里巴巴iconfont字体图标使用方法
  17. 华为申请区块链产权管理专利
  18. 图的连通,连通图,连通分量,强连通分量
  19. python求e的x次方
  20. DMZ 主机的 Windows 共享文件夹

热门文章

  1. maven已支持支付宝开放平台SDK
  2. 简述覆盖表(Covering Arrays)
  3. G6展示网络拓扑图,适配大数据量的方案
  4. 国仁网络资讯:短视频拍摄如何上热门;掌握这8大拍摄运镜手法即可。
  5. 使用 Python 构建图片搜索引擎
  6. cocos2d-x 学习笔记(2)cocos2d-x重要概念,项目结构及 CCDirector 导演控件
  7. 提升智商46招,总有一招适合你
  8. CWnd指针和HWnd
  9. 做销售,如何开发陌生市场?
  10. 烟台中学2021年高考成绩查询,烟台中学排名前十名,2021年烟台中学排名一览表