The best Highcharts bubble chart Tutorial In 2024, In this tutorial you can learn Configuration,3D bubble chart,
This chapter we will introduce Highcharts bubble diagram.
In the previous section we already know Highcharts configuration syntax. Let's look at the other configurations Highcharts.
Configure the type of chart 'bubble'. chart.type describes the chart type. The default value is "line".
chart.zoomType properties to configure the chart to enlarge, zoom by dragging the mouse to zoom along the x or y axis, can be set to: 'x', 'y', 'xy'.
var chart = { type: 'bubble', zoomType: 'xy' };
File name: highcharts_bubble_basic.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3write.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>
The above example output is:
Setting series.marker gradient allowed looks 3D effect.
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')] ] } }
File name: highcharts_bubble_3d.htm
<html> <head> <title>Highcharts 教程 | 本教程(w3write.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>
The above example output is: