• 32.企业快速开发平台Spring Cloud+Spring Boot+Mybatis之Highcharts 固定布局柱形图

     Highcharts 固定布局柱形图

    以下实例演示了固定布局柱形图。

    我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 series 下添加 pointPlacement 和 pointPadding 配置。

    series.pointPadding

    控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值为0.1

    series.pointPlacement

    在柱形图中，当 pointPlacement 设置为 "on" 时, X轴上的点没有间隔。如果 pointPlacement 设置为 "between", 列之间按刻度进行布局。

    在 Highcharts 3.0.2 后的版本, pointPlacement 可以支持数字，0 为轴上的值， -0.5 为当前值与前面一个值的间隔， 0.5 为 当前值与下一个值的间隔。 不同与文字设置选项，数字设置不影响轴之间的间隔。

    1. series: {
    2.    name: 'Employees',
    3.    color: 'rgba(165,170,217,1)',
    4.    data: [150, 73, 20],
    5.    pointPadding: 0.3,
    6.    pointPlacement: -0.2
    7. }

    实例

    文件名：highcharts_column_fixed.htm

     

    1. <html>
    2. <head>
    3.    <title>Highcharts 教程 | 菜鸟教程(runoob.com)title>
    4.    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    5.    <script src="https://code.highcharts.com/highcharts.js">script>  
    6. head>
    7. <body>
    8. <div id="container" style="width: 550px; height: 400px; margin: 0 auto">div>
    9. <script language="JavaScript">
    10. $(document).ready(function() { 
    11.    var chart = {
    12.       type: 'column'
    13.    };
    14.    var title = {
    15.       text: 'Efficiency Optimization by Branch'   
    16.    };   
    17.    var xAxis = {
    18.       categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
    19.    };
    20.    var yAxis = [{
    21.          min: 0,
    22.          title: {
    23.             text: 'Employees'
    24.          }
    25.       }, {
    26.          title: {
    27.             text: 'Profit (millions)'
    28.          },
    29.          opposite: true
    30.    }];
    31.    var legend = {
    32.       shadow: false
    33.    };
    34.    var tooltip = {
    35.       shared: true
    36.    };
    37.    var credits = {
    38.       enabled: false
    39.    };
    40.    var plotOptions = {
    41.       column: {
    42.          grouping: false,
    43.          shadow: false,
    44.          borderWidth: 0
    45.       }
    46.    };
    47.    var series= [{
    48.        name: 'Employees',
    49.             color: 'rgba(165,170,217,1)',
    50.             data: [150, 73, 20],
    51.             pointPadding: 0.3,
    52.             pointPlacement: -0.2
    53.         }, {
    54.             name: 'Employees Optimized',
    55.             color: 'rgba(126,86,134,.9)',
    56.             data: [140, 90, 40],
    57.             pointPadding: 0.4,
    58.             pointPlacement: -0.2
    59.         }, {
    60.             name: 'Profit',
    61.             color: 'rgba(248,161,63,1)',
    62.             data: [183.6, 178.8, 198.5],
    63.             tooltip: {
    64.                 valuePrefix: '$',
    65.                 valueSuffix: ' M'
    66.             },
    67.             pointPadding: 0.3,
    68.             pointPlacement: 0.2,
    69.             yAxis: 1
    70.         }, {
    71.             name: 'Profit Optimized',
    72.             color: 'rgba(186,60,61,.9)',
    73.             data: [203.6, 198.8, 208.5],
    74.             tooltip: {
    75.                 valuePrefix: '$',
    76.                 valueSuffix: ' M'
    77.             },
    78.             pointPadding: 0.4,
    79.             pointPlacement: 0.2,
    80.             yAxis: 1      
    81.    }];     
    82.       
    83.    var json = {};   
    84.    json.chart = chart; 
    85.    json.title = title; 
    86.    json.xAxis = xAxis;
    87.    json.yAxis = yAxis;
    88.    json.credits = credits;
    89.    json.legend = legend;
    90.    json.tooltip = tooltip;
    91.    json.plotOptions = plotOptions;
    92.    json.series = series;
    93.    $('#container').highcharts(json);
    94. });
    95.  
    96. script>
    97. body>
    98. html>
     

     

    以上实例输出结果为：
     

     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
红蓝对抗 网络安全 网络安全红蓝对抗演练                            
    
批量转换json到java bean工具说明                            
    
SVG图形                            
    
小黑子—MyBatis：第三章                            
    
IDEA 生成 javadoc                            
    
算法刷题打卡第33天：香槟塔                            
    
建材批发小程序微信上线开发                            
    
Python日学壹技：性能分析                            
    
数据分析之金融数据分析                            
    
【JAVA程序设计】（C00086）基于Servlet+jsp的学生信息管理系统                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/m0_59198293/article/details/126097956
                
    •