Latest web development tutorials

Highcharts utilizan gráfico de columnas negativa inversa

Highcharts gráfico de columnas Highcharts gráfico de columnas

El siguiente ejemplo demuestra el uso de un gráfico de columnas negativo inverso.

En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.

configuración

configuración gráfica

Configuración de columna de atributos el tipo de gráfico, chart.type describe el tipo de gráfico. El valor por defecto es "línea". 

var chart = {
   type: 'column'
};

Ejemplos

Nombre del archivo: highcharts_column_negative.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: 'column'
   };
   var title = {
      text: '使用负值的反向柱形图'   
   };   
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var credits = {
      enabled: false
   };
   var series= [{
      name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

La salida del ejemplo anterior es:

Highcharts gráfico de columnas Highcharts gráfico de columnas