Highcharts gráfico de columnas con etiquetas rotadas

Highcharts gráfico de columnas

El siguiente ejemplo demuestra un gráfico de columnas con etiquetas rotadas.

Ya hemos aprendido la sintaxis básica de configuración de Highcharts en capítulos anteriores. Ahora veamos otras configuraciones. Agregue el atributo rotation en dataLabels:

---

Configuración

dataLabels: etiquetas de datos

dataLabels define si se muestran etiquetas de datos en el gráfico.

El grado de rotación del texto está determinado por la propiedad rotation. También podemos usar otras propiedades para definir el fondo, el espaciado, el borde, etc. de las etiquetas de texto.

dataLabels = {
   enabled: true,
   rotation: -90,
   color: '#FFFFFF',
   align: 'right',
   format: '{point.y:.1f}', // 一个小数
   y: 10, // 从上到下 10 像素
   style: {
      fontSize: '13px',
      fontFamily: 'Verdana, sans-serif'
   }
}

Ejemplo

Nombre de archivo: highcharts_column_rotated.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(example.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: '2014 年全球最大人口城市排名'   
   };    
   var subtitle = {
      text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
   };
   var xAxis = {
      type: 'category',
      labels: {
         rotation: -45,
         style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
         }
      }
   };
   var yAxis ={
      min: 0,
      title: {
        text: 'Population (millions)'
      }
   };  
   var tooltip = {
      pointFormat: '2008 年人口: <b>{point.y:.1f} 百万</b>'
   };   
   var credits = {
      enabled: false
   };
   var series= [{
            name: 'Population',
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Instanbul', 14.2],
                ['Karachi', 14.0],
                ['Mumbai', 12.5],
                ['Moscow', 12.1],
                ['Sao Paulo', 11.8],
                ['Beijing', 11.7],
                ['Guangzhou', 11.1],
                ['Delhi', 11.1],
                ['Shenzhen', 10.5],
                ['Seoul', 10.4],
                ['Jakarta', 10.0],
                ['Kinshasa', 9.3],
                ['Tianjin', 9.3],
                ['Tokyo', 9.0],
                ['Cairo', 8.9],
                ['Dhaka', 8.9],
                ['Mexico City', 8.9],
                ['Lima', 8.9]
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;   
   json.tooltip = tooltip;   
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

El resultado del ejemplo anterior es:

Highcharts gráfico de columnas

Otras extensiones