Highcharts - Grafico a bolle 3D

Di seguito è riportato un esempio di grafico a bolle 3D.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di grafico a bolle 3D.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

grafico

Configura il tipo di grafico in modo che sia basato su bolle. chart.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

Configura il grafico per renderlo zoomabile. chart.zoomTypedecide in quali dimensioni l'utente può zoomare trascinando il mouse. Qui, i valori possibili sono x, yo xy.

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

series.marker

Configura il marker della serie in base al gradiente per dargli un aspetto 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')]
      ]
   }
}

Esempio

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>

Risultato

Verifica il risultato.

↰ Previous page