Latest web development tutorials

Highcharts impilati istogramma con percentuali

Highcharts istogramma Highcharts istogramma

L'esempio seguente dimostra l'uso della percentuale di istogramma in pila.

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: 'percent'      
   }
};

Esempi

Nome file: highcharts_column_percentage.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 yAxis ={
      min: 0,
      title: {
        text: '水果总消费量'
      }
   };  
   var tooltip = {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
   };
   var plotOptions = {
      column: {
         stacking: 'percent'        
      }
   };
   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.yAxis = yAxis;   
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

L'output sopra esempio è:

Highcharts istogramma Highcharts istogramma