了解下何为Highcharts 气泡图

最新推荐文章于 2023-04-17 15:44:41 发布

游戏大爷君

最新推荐文章于 2023-04-17 15:44:41 发布

阅读量360

点赞数

文章标签： html5 javascript html

原文链接：https://www.fgba.net/

版权

Highcharts 是一个用纯JavaScript编写的一个图表库。Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。

了解下何为Highcharts 气泡图了解下何为Highcharts 气泡图

本章节我们将为大家介绍 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="(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>

以上富贵论坛实例输出结果为：

ValuesHighcharts BubblesSeries 1Series 2Series 30100255075-250255075100125Highcharts.com

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="
   <script src="/try/demo_source/highcharts.js"></script>
   <script src="(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>

以上实例输出结果为：

ValuesHighcharts bubbles with radial gradient fillSeries 1Series 201002550750255075100Highcharts.com

游戏大爷君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
了解下何为Highcharts 气泡图

Highcharts 是一个用纯JavaScript编写的一个图表库。Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。本章节我们将为大家介绍 Highcharts 的气泡图。配置chart 配置配置 chart 的 type 为 'bubble' 。chart.type 描述了图表类型。默认值为 "line"。chart.zoomType 属性可配置图表放大，通过拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy'。
复制链接

扫一扫