固定配置の縦棒グラフ

以下は、固定配置の縦棒グラフの例です。

link：/highcharts/highcharts_configuration_syntax [Highcharts設定構文]の章でチャートを描画するために使用される設定はすでに見ました。ここで、追加の構成と、 pointPlacement と pointPadding をシリーズに追加した方法を見てみましょう。

固定配置の縦棒グラフの例を以下に示します。

series.pointPadding

x軸単位での各列またはバーの間のパディング。デフォルトは0.1です。

series.pointPlacement

縦棒グラフでは、pointPlacementが「on」の場合、ポイントはX軸のパディングを作成しません。ポーラー縦棒グラフでは、これは最初の縦棒が真北を指すことを意味します。 pointPlacementが「between」の場合、列は目盛りの間に配置されます。これは、2つの時点間または極座標チャートの特定のセクター内の量を視覚化するのに役立ちます。

Highcharts 3.0.2以降、ポイントの配置は数値にすることもできます。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_*

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://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-column-fixed

目次

固定配置の縦棒グラフ

series.pointPadding

series.pointPlacement

例

結果