Latest web development tutorials

Highcharts faltan valores mapa de la zona

Highcharts mapa de la zona Highcharts mapa de la zona

El siguiente ejemplo demuestra la pérdida de valor de la zona en la fig.

En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones. Añadir propiedades spacingBottom en la tabla.

configuración gráfica

El gráfico de la propiedad spacingBottom se establece en 30. Intervalo representa el intervalo entre las tablas.

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

Ejemplos

Nombre del archivo: 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>

La salida del ejemplo anterior es:

Highcharts mapa de la zona Highcharts mapa de la zona