Highcharts 固定佈局柱形圖

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 為 當前值與下一個值的間隔。 不同與文字設置選項，數字設置不影響軸之間的間隔。 

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

實例

檔案名：highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教學 | IT研修(xuhuhu.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/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: 'Efficiency Optimization by Branch'
   };
   var xAxis = {
      categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
   };
   var yAxis = [{
         min: 0,
         title: {
            text: 'Employees'
         }
      }, {
         title: {
            text: 'Profit (millions)'
         },
         opposite: true
   }];
   var legend = {
      shadow: false
   };
   var tooltip = {
      shared: true
   };
   var credits = {
      enabled: false
   };
   var plotOptions = {
      column: {
         grouping: false,
         shadow: false,
         borderWidth: 0
      }
   };
   var series= [{
       name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1
   }];

   var json = {};
   json.chart = chart;
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.credits = credits;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.series = series;
   $('#container').highcharts(json);
});

</script>
</body>
</html>

以上實例輸出結果為：

Highcharts 柱形圖Highcharts 柱形圖