Graphique en aires spline Highcharts

L'exemple suivant montre un graphique en aires courbé.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de base de Highcharts. Ensuite, examinons d'autres configurations. Modifiez l'attribut type dans le graphique.

Configuration du graphique

Définissez la propriété type du graphique sur areaspline. chart.type décrit le type de graphique. La valeur par défaut est "line".

var chart = {
   type: 'areaspline'  
};

Exemple

Nom du fichier : highcharts_area_spline.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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>

Le résultat de sortie de l'exemple ci-dessus est :

Graphique en aires Highcharts

autres extensions