彩票走势图

JavaScript图表库Highcharts入门教程(八):气泡图

翻译|使用教程|编辑:吴园园|2020-03-05 15:21:58.017|阅读 707 次

概述:气泡图例是一个附加元素,可以将其添加到图表图例中的任何位置。气泡图例允许以简单透明的方式显示气泡系列的比例。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

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

点击下载Highcharts最新试用版

具有自动调整范围的演示

JavaScript图表库Highcharts入门教程(八):气泡图

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

JavaScript图表库Highcharts入门教程(八):气泡图

带范围的演示

JavaScript图表库Highcharts入门教程(八):气泡图

安装需要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]
        ]
    }]
}

想要了解或购买Highcharts正版授权的朋友,欢迎


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP