Highcharts - Gráfico de área usando Spline

A continuación se muestra un ejemplo de un gráfico de áreas que utiliza spline.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veremos un ejemplo de un gráfico de áreas usando spline. También entenderemos la configuración adicional. Hemos cambiado el atributo de tipo en el gráfico.

gráfico

Configure el tipo de gráfico para que esté basado en 'areaspline'. chart.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

var chart = {
   type: 'areaspline'  
};

Ejemplo

highcharts_area_spline.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: 'areaspline'	  
            };
            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: 'Fruit units'
               }
            };
            var tooltip = {
               shared: true,
               valueSuffix: ' units'
            };
            var credits = {
               enabled: false
            }
            var plotOptions = {
               areaspline: {
                  fillOpacity: 0.5
               }
            };
            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

Verifica el resultado.

↰ Previous page