为什么我的柱形图在高图中被裁剪

Question

我已经使用 highchart 实现了柱形图。

我最右边的列被裁剪，我无法修复它。请建议我错过了哪个选项。

{

"chart":{

      "renderTo":"1_123456_id",
      "type":"column",
      "marginBottom":100,
      "marginTop":100,
      "marginRight":400,
      "width":1050
},
"leftMetric":"Too Soft",
"rightMetric":"Too Loud",
"activeCount":8,
"passiveCount":0,
"optimal":92,
"totalResponses":25,
"averageText":"4.6",
"plotOptions":{

      "series":{
         "pointWidth":[
            "30"
         ],
         "borderRadius":[
            "10"
         ],

      },
      "column":{
         "pointPlacement":"on",    
      },
},
"credits":{

"enabled":false
},
"title":{

      "text":"VOLUME",
      "x":310,
      "align":"left",
      "style":{
         "fontWeight":"bold",
         "fontSize":15,
         "color":"#000",
         "marginRight":100
      }
},
"xAxis":[

      {
         "categories":[
            0,
            0,
            0,
            1,
            0,
            20,
            2,
            0,
            1,
            1,
            0
         ],
         "tickmarkPlacement":"on",
         "tickPositions":[
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11
         ],
         "gridLineDashStyle":"longdash",
         "gridLineWidth":1,
         "labels":{
            "style":{
               "fontWeight":"bold",
               "fontSize":15
            }
         }
      },
      {
         "linkedTo":0,
         "tickmarkPlacement":"on",
         "tickPositions":[
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11
         ],
         "opposite":"true",
         "categories":[
            0,
            1,
            2,
            3,
            4,
            5,
            4,
            3,
            2,
            1,
            0
         ],
         "gridLineDashStyle":"longdash",
         "gridLineWidth":1
      }
],
"yAxis":{

      "min":0,
      "max":30,
      "labels":{
         "enabled":true
      },
      "title":{
         "text":"Responses"
      },
      "tickInterval":2,
      "gridLineColor":"#9ACD9D",
},
"series":[

{

         "showInLegend":false,
         "name":"speaker",
         "data":[
            {
               "y":0,
               "color":"C82506"
            },
            {
               "y":0,
               "color":"BC5B0C"
            },
            {
               "y":0,
               "color":"F39019"
            },
            {
               "y":1,
               "color":"F5D329"
            },
            {
               "y":0,
               "color":"#70BF40"
            },
            {
               "y":20,
               "color":"#01882A"
            },
            {
               "y":2,
               "color":"#70BF40"
            },
            {
               "y":0,
               "color":"F5D329"
            },
            {
               "y":1,
               "color":"F39019"
            },
            {
               "y":1,
               "color":"BC5B0C"
            },
            {
               "y":1,
               "color":"C82506"
            }
         ]
      }
]
}

小提琴链接

编辑 如何使网格线在极端和中间移出轴，如图所示

Answer 1

正确方法：
你只需clip关闭plotOptions

plotOptions:{
      column: {
         pointPlacement: "on",
         clip: false,
      }
}

这是小提琴，也感谢Pawel Fus

棘手的方法：
这就是你想要的。我不会更新我之前的答案，因为这可能对其他人有帮助。但由于问题是图表被 highchart 裁剪，所以我做相反的操作并从属性中删除整数以获得完整的图表。clip-path= "url(#highcharts-NUMBER)

<g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="3" transform="translate(51,100) scale(1 1)" style="" clip-path="url(#highcharts-1)">

这是执行此操作的代码：

function showMagic(){
    $(".highcharts-series-group").children()
        .filter(function() {
        var $this = $(this);
        var lol = $this.attr("clip-path");
        if (lol) {
            $this.attr("clip-path","url(#highcharts)");
        } else {
            return false;
        }
    });
}
window.onload = showMagic;

是的，有点棘手，但它有效！这是现场演示

更新：

这部分将是问题更新部分的答案：
我们应该格式化标签xAxis：

 "labels": { 
      "useHTML": true,
      "formatter": function () {

            if(this.value==0 || this.value==5)
            {
                return '<p style="margin-top: -20px;" >'+this.value + '<br> | </p> ' ;
            }
          else
          {
              return this.value;
          }
        }
  },

这是现场演示