Highcharts 標簽旋轉柱形圖 · W3School Highcharts 教程

# Highcharts 標簽旋轉柱形圖以下實例演示了標簽旋轉柱形圖。我們在前面的章節已經了解了 Highcharts 基本配置語法。接下來讓我們來看下其他的配置。在 dataLabels 中添加 rotation 屬性： ## 配置 ### dataLabels : 數據標簽 dataLabels 定義圖上是否顯示數據標簽。文本旋轉程度由 rotation 屬性決定。我們還可以通過其他屬性來定義文本標簽的背景，間隔，邊框等。 ``` dataLabels = { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', format: '{point.y:.1f}', // 一個小數 y: 10, // 從上到下 10 像素 style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } ``` ### 實例文件名：highcharts_column_rotated.htm ``` <html> <head> <title>Highcharts 教程 | 菜鳥教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/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> ``` 以上實例輸出結果為： ![](https://box.kancloud.cn/2015-12-29_56825178c0960.png)