Latest web development tutorials

Highcharts grafico a barre gamma

Highcharts istogramma Highcharts istogramma

I seguenti esempi dimostrano il grafico a barre gamma.

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

configurazione grafico

Configurare il tipo di grafico 'columnrange'. chart.type descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'columnrange',
   inverted: true
};

Esempi

Nome file: highcharts_column_range.htm 

<html>
<head>
<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>  
   <script src="http://code.highcharts.com/highcharts-more.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: 'columnrange',
     inverted:true
   };
   var title = {
      text: 'Temperature variation by month'   
   };  
   var subtitle = {
      text: 'Observed in Vik i Sogn, Norway, 2009'   
   };  
   var xAxis = {
      categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
   };
   var yAxis = {     
      title: {
         text: 'Temperature ( \xB0C )'         
      }      
   };
   var tooltip = {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
   };
   var plotOptions = {
      columnrange: {
         dataLabels: {
            enabled: true,
            formatter: function () {
               return this.y + '\xB0C';
            }
         }
      }
   };  
   var credits = {
      enabled: false
   };
   
   var series= [{
        name: 'Temperatures',
        data: [
           [-9.7, 9.4],
           [-8.7, 6.5],
           [-3.5, 9.4],
           [-1.4, 19.9],
           [0.0, 22.6],
           [2.9, 29.5],
           [9.2, 30.7],
           [7.3, 26.5],
           [4.4, 18.0],
           [-3.1, 11.4],
           [-5.2, 10.4],
           [-13.5, 9.8]
        ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;  
   json.credits = credits;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

L'output sopra esempio è:

Highcharts istogramma Highcharts istogramma