Latest web development tutorials

Highcharts пузырьковая диаграмма

В этой главе мы введем 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 教程 | 本教程(w3big.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>

В приведенном выше примере выход:

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 教程 | 本教程(w3big.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>

В приведенном выше примере выход: