Latest web development tutorials

Highcharts colonna impilati gruppo di grafici

Highcharts istogramma Highcharts istogramma

L'esempio seguente mostra Stacked gruppo istogramma.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni. Aggiungere accatastamento immobili a plotOptions a:

configurazione

plotOptions: opzioni del punto dati

plotOptions utilizzati per impostare i punti dati grafico proprietà relative. plotOptions Secondo vari tipi di grafico, le loro proprietà insieme leggermente diverso.

impostazioni di configurazione pila Grafico plotOptions.area.stacking come "cento". Se si disattiva l'uso dello stack nullo. 

var plotOptions = {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
         style: {
            textShadow: '0 0 3px black'
         }
      }
   }
};

Configurazione Voce di colonna di dati serie

Configurazione in una pila per ogni voce corrispondente colonna di dati. 

series: [{
   name: 'John',
   data: [5, 3, 4, 7, 2],
   stack: 'male'
}]

Esempi

Nome file: highcharts_column_rotated.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: 'Total fruit consumption, grouped by gender'   
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      allowDecimals: false,
      min: 0,
      title: {
        text: 'Number of fruits'
      }     
   }; 
   var plotOptions = {
      column: {
         stacking: 'normal'        
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
          name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

L'output sopra esempio è:

Highcharts istogramma Highcharts istogramma