• 39.企业快速开发平台Spring Cloud+Spring Boot+Mybatis之Highcharts 标签旋转柱形图

     Highcharts 标签旋转柱形图

    以下实例演示了标签旋转柱形图。

    我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 dataLabels 中添加 rotation 属性：

    配置

    dataLabels : 数据标签

    dataLabels 定义图上是否显示数据标签。

    文本旋转程度由 rotation 属性决定。我们还可以通过其他属性来定义文本标签的背景，间隔，边框等。

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

    实例

    文件名：highcharts_column_rotated.htm

    1. <html>
    2. <head>
    3. <meta charset="UTF-8" />
    4. <title>Highcharts 教程 | 菜鸟教程(runoob.com)title>
    5. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    6. <script src="http://code.highcharts.com/highcharts.js">script>
    7. head>
    8. <body>
    9. <div id="container" style="width: 550px; height: 400px; margin: 0 auto">div>
    10. <script language="JavaScript">
    11. $(document).ready(function() {  
    12.    var chart = {
    13.       type: 'column'
    14.    };
    15.    var title = {
    16.       text: '2014 年全球最大人口城市排名'   
    17.    };    
    18.    var subtitle = {
    19.       text: 'Source: Wikipedia'
    20.    };
    21.    var xAxis = {
    22.       type: 'category',
    23.       labels: {
    24.          rotation: -45,
    25.          style: {
    26.             fontSize: '13px',
    27.             fontFamily: 'Verdana, sans-serif'
    28.          }
    29.       }
    30.    };
    31.    var yAxis ={
    32.       min: 0,
    33.       title: {
    34.         text: 'Population (millions)'
    35.       }
    36.    };  
    37.    var tooltip = {
    38.       pointFormat: '2008 年人口: {point.y:.1f} 百万'
    39.    };   
    40.    var credits = {
    41.       enabled: false
    42.    };
    43.    var series= [{
    44.             name: 'Population',
    45.             data: [
    46.                 ['Shanghai', 23.7],
    47.                 ['Lagos', 16.1],
    48.                 ['Instanbul', 14.2],
    49.                 ['Karachi', 14.0],
    50.                 ['Mumbai', 12.5],
    51.                 ['Moscow', 12.1],
    52.                 ['Sao Paulo', 11.8],
    53.                 ['Beijing', 11.7],
    54.                 ['Guangzhou', 11.1],
    55.                 ['Delhi', 11.1],
    56.                 ['Shenzhen', 10.5],
    57.                 ['Seoul', 10.4],
    58.                 ['Jakarta', 10.0],
    59.                 ['Kinshasa', 9.3],
    60.                 ['Tianjin', 9.3],
    61.                 ['Tokyo', 9.0],
    62.                 ['Cairo', 8.9],
    63.                 ['Dhaka', 8.9],
    64.                 ['Mexico City', 8.9],
    65.                 ['Lima', 8.9]
    66.             ],
    67.             dataLabels: {
    68.                 enabled: true,
    69.                 rotation: -90,
    70.                 color: '#FFFFFF',
    71.                 align: 'right',
    72.                 format: '{point.y:.1f}', // one decimal
    73.                 y: 10, // 10 pixels down from the top
    74.                 style: {
    75.                     fontSize: '13px',
    76.                     fontFamily: 'Verdana, sans-serif'
    77.                 }
    78.             }
    79.    }];     
    80.       
    81.    var json = {};   
    82.    json.chart = chart; 
    83.    json.title = title;   
    84.    json.subtitle = subtitle;
    85.    json.xAxis = xAxis;
    86.    json.yAxis = yAxis;   
    87.    json.tooltip = tooltip;   
    88.    json.credits = credits;
    89.    json.series = series;
    90.    $('#container').highcharts(json);
    91.   
    92. });
    93. script>
    94. body>
    95. html>

    以上实例输出结果为：

  • 相关阅读:
    Docker Desktop 设置镜像环境变量
    Web前端：Web 项目的前14个React图表库
    100天精通Python（数据分析篇）——第65天：Pandas聚合操作与案例
    代码随想录二刷 Day 43
    java8新特性
    【Nginx26】Nginx学习：日志与镜像流量复制
    git命令合并某一个分支的某个commit到目标分支
    vue(12)
    虚拟人三维动画宣传片案例分享 | 广州“五羊”城市文化IP商业体裸眼3D广告影片
    Java二分查找
  • 原文地址：https://blog.csdn.net/m0_59198293/article/details/126262201