固定定位柱状图

以下是固定定位柱状图示例。

我们已经在 Highcharts 配置语法章节中了解到用于绘制图表的配置。现在让我们了解其他配置，以及我们在 series 下添加了 pointPlacement 和 pointPadding 的方式。

下面提供了固定定位柱状图的示例。

series.pointPadding

每个柱或条之间的填充，以 x 轴单位表示；其默认值为 0.1。

series.pointPlacement

在柱状图中，当 pointPlacement 是“on”时，点将不会在 X 轴上创建任何填充。在极坐标柱状图中，这意味着第一个柱状点直接向北。如果 pointPlacement 是“between”，则柱状点将在刻度之间布局。这对于可视化极坐标图中两个时间点之间或特定扇区中某个数量非常有用。

自 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.htm

演示

<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_charts.htm

打印页面