Latest web development tutorials

Highcharts utilizzano istogramma negativo inverso

Highcharts istogramma Highcharts istogramma

L'esempio seguente dimostra l'uso di un grafico a colonne negativo inverso.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.

configurazione

configurazione grafico

Impostare la colonna attributo type grafico, chart.type descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'column'
};

Esempi

Nome file: 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>

L'output sopra esempio è:

Highcharts istogramma Highcharts istogramma