Лучшее руководство по Highcharts пузырьковая диаграмма в 2024 году. В этом руководстве вы можете изучить конфигурация,3D-пузырьковая диаграмма,
В этой главе мы введем Highcharts диаграмму пузыря.
В предыдущем разделе мы уже знаем синтаксис конфигурации Highcharts. Давайте посмотрим на других конфигурациях Highcharts.
Настройка типа диаграммы "пузырь". chart.type описывает тип диаграммы. Значение по умолчанию является "строка".
свойства chart.zoomType настроить диаграмму, чтобы увеличить, изменять масштаб, перемещая мышь, чтобы увеличить масштаб по оси х или оси у, может быть установлен на: 'X', 'Y', 'ху'.
var chart = { type: 'bubble', zoomType: 'xy' };
Имя файла: 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>
В приведенном выше примере выход:
Установка 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 教程 | 本教程(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>
В приведенном выше примере выход: