Highcharts - Gráfico de columnas 3D

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

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 'columna'. Opciones para renderizar gráficos en 3 dimensiones.

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

Ejemplo

highcharts_3d_column.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>
      <div id = "sliders">
         <table>
            <tr>
               <td>Alpha Angle</td>
               <td><input id = "R0" type = "range" min = "0" max = "45" value = "15"/>
                  <span id = "R0-value" class = "value"></span>
               </td>
            </tr>
            <tr>
               <td>Beta Angle</td>
               <td><input id = "R1" type = "range" min = "0" max = "45" value = "15"/>
                  <span id = "R1-value" class = "value"></span>
               </td>
            </tr>
         </table>
      </div>
      
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               renderTo: 'container',
               type: 'column',
               margin: 75,
               
               options3d: {
                  enabled: true,
                  alpha: 15,
                  beta: 15,
                  depth: 50,
                  viewDistance: 25
               }
            };
            var title = {
               text: 'Chart rotation demo'   
            };
            var subtitle = {
               text: 'Test options by dragging the sliders below'  
            };
            var plotOptions = {
               column: {
                  depth: 25
               }
            };
            var series = [{
               data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
                  194.1, 95.6, 54.4]
            }];
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.subtitle = subtitle;    
            json.series = series;
            json.plotOptions = plotOptions;
            var highchart = new Highcharts.Chart(json);
           
            function showValues() {
               $('#R0-value').html(highchart.options.chart.options3d.alpha);
               $('#R1-value').html(highchart.options.chart.options3d.beta);
            }
            
            // Activate the sliders
            $('#R0').on('change', function () {
               highchart.options.chart.options3d.alpha = this.value;
               showValues();
               highchart.redraw(false);
            });
            $('#R1').on('change', function () {
               highchart.options.chart.options3d.beta = this.value;
               showValues();
               highchart.redraw(false);
            });
            showValues();
         });
      </script>
   </body>
   
</html>

Resultado

Verifique el resultado.

↰ Previous page