Highcharts - Gráfico de áreas con ejes invertidos

A continuación se muestra un ejemplo de un gráfico de áreas con ejes invertidos.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico de áreas con ejes invertidos. También entenderemos la configuración adicional y agregaremos un atributo invertido en el gráfico.

gráfico

Configure el inverso del gráfico como verdadero.

Configure los ejes a invertir. Cuandotrue x axis es vertical y y axises horizontal. Si una serie de barras está presente en el gráfico, la misma se invertirá. Aquí, el valor predeterminado es falso.

var chart = {
   type: 'area',
   inverted: true
};

Ejemplo

highcharts_area_inverted.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>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'area',
               inverted: true
            };
            var title = {
               text: 'Average fruit consumption during one week'   
            }; 
            var subtitle = {
               style: {
                  position: 'absolute',
                  right: '0px',
                  bottom: '10px'
               }
            };
            var legend = {
               layout: 'vertical',
               align: 'left',
               verticalAlign: 'top',
               x: -150,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'
            };
            var xAxis = {
               categories: ['Monday','Tuesday','Wednesday','Thursday',
                  'Friday','Saturday','Sunday']      
            };
            var yAxis = {
               title: {
                  text: 'Number of units'
               },
               labels: {
                  formatter: function () {
                     return this.value;
                  }
               },
               min: 0
            };
            var plotOptions = {
               area: {
                  fillOpacity: 0.5
               }
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'John',
                  data: [3, 4, 3, 5, 4, 10, 12]
               }, 
               {
                  name: 'Jane',
                  data: [1, 3, 4, 3, 3, 5, 4]
               }
            ];

            var json = {};   
            json.chart = chart; 
            json.title = title; 
            json.subtitle = subtitle; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;   
            json.plotOptions = plotOptions;
            json.credits = credits;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifique el resultado.

↰ Previous page