• 38.企业快速开发平台Spring Cloud+Spring Boot+Mybatis之Highcharts 使用百分比的堆叠柱形图

     Highcharts 使用百分比的堆叠柱形图

    以下实例演示了使用百分比的堆叠柱形图。

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

    配置

    plotOptions：数据点选项

    plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。

    配置图表堆叠设置 plotOptions.area.stacking 为 "percent"。如果禁用堆叠使用 null。

    1. var plotOptions = {
    2.    column: {
    3.       stacking: 'percent'      
    4.    }
    5. };

    实例

    文件名：highcharts_column_percentage.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: '堆叠柱形图' 
    17.    };    
    18.    var xAxis = {
    19.       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    20.    };
    21.    var yAxis ={
    22.       min: 0,
    23.       title: {
    24.         text: '水果总消费量'
    25.       }
    26.    };  
    27.    var tooltip = {
    28.       pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)
      '      ,
    29.       shared: true
    30.    };
    31.    var plotOptions = {
    32.       column: {
    33.          stacking: 'percent'        
    34.       }
    35.    };
    36.    var credits = {
    37.       enabled: false
    38.    };
    39.    var series= [{
    40.         name: 'John',
    41.             data: [5, 3, 4, 7, 2]
    42.         }, {
    43.             name: 'Jane',
    44.             data: [2, 2, 3, 2, 1]
    45.         }, {
    46.             name: 'Joe',
    47.             data: [3, 4, 4, 2, 5]      
    48.    }];     
    49.       
    50.    var json = {};   
    51.    json.chart = chart; 
    52.    json.title = title;   
    53.    json.xAxis = xAxis;
    54.    json.yAxis = yAxis;   
    55.    json.tooltip = tooltip;
    56.    json.plotOptions = plotOptions;
    57.    json.credits = credits;
    58.    json.series = series;
    59.    $('#container').highcharts(json);
    60.   
    61. });
    62. script>
    63. body>
    64. html>

    以上实例输出结果为：

  • 相关阅读:
    宇视大屏出现不规则闪烁故障排查方法
    算法实战：用回溯算法计算商品所有的SKU！
    vue双向绑定原理
    Web 后端的一生之敌：分页器
    C++并发之锁(std::lock_guard,std::unique_lock)
    GAIA1-自动驾驶各场景数据生成
    你学习·我奖励，21天学习挑战赛 | 等你来战
    [SpringBoot系列]消息中间件解决方案
    泛微实物档案数字化管理方案，全面优化组织档案管理
    JVM内存设置
  • 原文地址：https://blog.csdn.net/m0_59198293/article/details/126244964