具有固定位置的列（Column with fixed placement）

优质

小牛编辑

122浏览

2023-12-01

以下是具有固定位置的柱形图的示例。

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置。现在让我们看看其他配置，以及我们如何在系列下添加pointPlacement和pointPadding 。

下面给出了具有固定位置的柱形图的示例。

series.pointPadding

每列或条之间的填充，以x轴为单位; 默认为0.1。

series.pointPlacement

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

从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
}

例子 (Example)

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>