Latest web development tutorials

Highcharts logarithmischen Chart

Highcharts graph Highcharts graph

Das folgende Beispiel zeigt eine logarithmische Charts.

Im vorigen Abschnitt wissen wir bereits Highcharts Konfigurationssyntax. Schauen wir uns an, wie zu konfigurieren.

Konfiguration

YAxis.type konfiguriert als "logarithmische". Es definiert die x-Achsen-Typ. Optionale Werte sind "linear", "logarithmisch", "Datetime" oder "Kategorie". Der Standardwert ist linear. 

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

Beispiele

Dateiname: highcharts_line_logarithmic.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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: '对数实例(w3big.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>

Das obige Beispiel Ausgabe lautet:

Highcharts graph Highcharts graph