Highcharts 带旋转标签柱形图

下图是一个 Highcharts 带旋转标签柱形图

配置

配置属性 dataLabels 用于定义图表上是否显示数据标签

配置属性 datalabels.rotation 用于配置标签文本旋转程度

还可以设置 dataLabels 的其它子属性来定义文本标签的背景，间隔，边框等

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

范例

下面的代码列出了 Highcharts 带旋转标签柱形图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script> 
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 options = {};

options.chart = chart;
options.title = title;
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.tooltip = tooltip;
options.credits = credits;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 基本面积图 Highcharts 基本饼图 →

Highcharts 带旋转标签柱形图

配置

范例

学习 Hightcharts