Graphique logarithmique Highcharts

Graphique spline Highcharts

L'exemple suivant démontre un graphique logarithmique.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de Highcharts. Ensuite, voyons comment le configurer.

Configuration

Définissez yAxis.type sur 'logarithmic'. Il définit le type de l'axe x. Les valeurs disponibles sont "linear", "logarithmic", "datetime" ou "category". La valeur par défaut est linear.

yAxis
var yAxis = {
   type: 'logarithmic',
   minorTickInterval: 0.1
};

Exemple

Nom du fichier : highcharts_line_logarithmic.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 title = {
      text: '对数实例(example.com)'   
   };
   var xAxis = {
      tickInterval: 1
   };
   var yAxis = {
      type: 'logarithmic',
      minorTickInterval: 0.1
   };
   var tooltip = {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: 'x = {point.x}, y = {point.y}'
   };
   var plotOptions = {
      spline: {
         marker: {
            enabled: true
         }
      }
   };
   var series= [{
         name: 'data',
         data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
         pointStart: 1
      }
   ];     
      
   var json = {};   
   json.title = title;   
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Essayez-le vous-même »

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

Graphique spline Highcharts