Highcharts - Gráfico de burbujas 3D

A continuación se muestra un ejemplo de un gráfico de burbujas 3D.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico de burbujas 3D.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

gráfico

Configure el tipo de gráfico para que se base en burbujas. chart.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

Configure el gráfico para que se pueda ampliar. chart.zoomTypedecide en qué dimensiones puede hacer zoom el usuario arrastrando el mouse. Aquí, los valores posibles son x, yo xy.

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

series.marker

Configure el marcador de la serie para que se base en degradados para darle una sensación de 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')]
      ]
   }
}

Ejemplo

highcharts_bubble_3d.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
      <script src = "https://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>

Resultado

Verifica el resultado.

↰ Previous page