May 09, 2021 Highcharts
In this section we'll introduce you to highcharts' bubble charts.
We've already learned about the Highcharts configuration syntax in the previous sections. Let's look at the other configurations of Highcharts.
Configure the type of chart to be 'bubble'. C hart.type describes the chart type. The default is line.
The chart.zoomType property can be configured to zoom in and out by dragging the mouse, along the x-axis or the y-axis, and can be set to: 'x', 'y', 'xy'.
var chart = { type: 'bubble', zoomType: 'xy' };
File name: highcharts_bubble_basic.htm
<html> <head> <title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script> <script src="/try/demo_source/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js" rel="external nofollow" rel="external nofollow" ></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 output of the above examples is:
Set the series.marker gradient to make it look 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')] ] } }
File name: highcharts_bubble_3d.htm
<html> <head> <title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script> <script src="/try/demo_source/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js" rel="external nofollow" rel="external nofollow" ></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 output of the above examples is: