Highcharts - Gráfico de anillos 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 anillos en 3D.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

chart.options3d

Configure el tipo de gráfico para que esté basado en 3D. Establezca el tipo como 'Pie'. Aquí, los gráficos se pueden representar en 3 dimensiones.

var chart = {
   type: 'pie',
   options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
   }
};

plotOptions.pie.innerSize

El tamaño del diámetro interior del pastel. Un tamaño mayor que 0 representa undonut chart. El tamaño puede ser un porcentaje o un valor de píxel. Los porcentajes son relativos al tamaño de la tarta. Los valores de los píxeles se dan como números enteros. Aquí, el valor predeterminado es 0.

plotOptions.pie.depth

El grosor de un pastel 3D.

plotOptions: {
   pie: {
      innerSize: 100,
      depth: 45
   }
},

Ejemplo

highcharts_3d_donut.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-3d.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: 'pie',
               options3d: {
                  enabled: true,
                  alpha: 45         
               }
            };
            var title = {
               text: 'Contents of Highsoft\'s weekly fruit delivery'   
            };   
            var subtitle = {
               text: '3D donut in Highcharts'
            };  
            var plotOptions = {
               pie: {
                  innerSize: 100,
                  depth: 45
               }
            };   
            var series = [{
               name: 'Delivered amount',
               data: [
                  ['Bananas', 8],
                  ['Kiwi', 3],
                  ['Mixed nuts', 1],
                  ['Oranges', 6],
                  ['Apples', 8],
                  ['Pears', 4],
                  ['Clementines', 4],
                  ['Reddish (bag)', 1],
                  ['Grapes (bunch)', 1]
               ]
            }];     
            
            var json = {};   
            json.chart = chart; 
            json.title = title;       
            json.subtitle = subtitle; 
            json.plotOptions = plotOptions; 
            json.series = series;   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifique el resultado.

↰ Previous page