Latest web development tutorials

Highcharts Werte Karte fehlt

Highcharts Karte Highcharts Karte

Das folgende Beispiel zeigt den Verlust der Wert des Bereichs in Fig.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen. In spacingBottom Eigenschaften in der Tabelle.

Chart-Konfiguration

Die Grafik von spacingBottom Eigenschaft auf 30. Intervall stellt das Intervall zwischen den Charts.

var chart = {
   type: 'area',
   spacingBottom: 30
};

Beispiele

Dateiname: highcharts_area_missing.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 chart = {
      type: 'area',
	  spacingBottom: 30
   };
   var title = {
      text: 'Fruit consumption *'   
   }; 
   var subtitle = {
      text: '* Jane\'s banana consumption is unknown',
      floating: true,
      align: 'right',
      verticalAlign: 'bottom',
      y: 15
   };
   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: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']      
   };
   var yAxis = {
      title: {
         text: 'Y-Axis'
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      }
   };
   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.name + '</b><br/>' +
            this.x + ': ' + this.y;
      }
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: 'John',
            data: [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            name: 'Jane',
            data: [1, 0, 3, null, 3, 1, 2, 1]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Das obige Beispiel Ausgabe lautet:

Highcharts Karte Highcharts Karte