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 教程 | サンプル(example.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 縦棒グラフ

その他の拡張