Highcharts 固定布局柱形圖

Highcharts 柱形圖Highcharts 柱形圖

以下實(shí)例演示了固定布局柱形圖。

我們?cè)谇懊娴恼鹿?jié)已經(jīng)了解了 Highcharts 基本配置語法。接下來讓我們來看下其他的配置。在 series 下添加 pointPlacement 和 pointPadding 配置。

series.pointPadding

控制每列之間的距離值，當(dāng)highcharts圖表寬度固定的情況下，此值越大，柱子寬度越小，反之相反。默認(rèn)此值為0.1

series.pointPlacement

在柱形圖中，當(dāng) pointPlacement 設(shè)置為 "on" 時(shí), X軸上的點(diǎn)沒有間隔。如果 pointPlacement 設(shè)置為 "between", 列之間按刻度進(jìn)行布局。

在 Highcharts 3.0.2 后的版本, pointPlacement 可以支持?jǐn)?shù)字，0 為軸上的值， -0.5 為當(dāng)前值與前面一個(gè)值的間隔， 0.5 為 當(dāng)前值與下一個(gè)值的間隔。 不同與文字設(shè)置選項(xiàng)，數(shù)字設(shè)置不影響軸之間的間隔。 

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

實(shí)例

文件名：highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" ></script>
   <script src="http://code.highcharts.com/highcharts.js" rel="external nofollow" ></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>

嘗試一下 ?

以上實(shí)例輸出結(jié)果為：

Highcharts 柱形圖Highcharts 柱形圖