Highcharts - Gráfico de área con valores negativos

A continuación se muestra un ejemplo de un gráfico de áreas con valores negativos.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, analicemos un ejemplo de un gráfico de áreas con valores negativos.

Ejemplo

highcharts_area_negative.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'
            };
            var title = {
               text: 'Area chart with negative values'   
            };   
            var xAxis = {
               categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'John',
                  data: [5, 3, 4, 7, 2]
               }, 
               {
                  name: 'Jane',
                  data: [2, -2, -3, 2, 1]
               }, 
               {
                  name: 'Joe',
                  data: [3, 4, 4, -2, 5]
               }
            ];

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

Resultado

Verifique el resultado.

↰ Previous page