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

debugcn 发表于 Dev

永远学习

我已经使用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"
            }
         ]
      }
]
}

链接到FIDDLE

编辑如何使网格线在极端和中间偏离轴线，如图像中所示在此处输入图片说明

奥斯扬

正确的方法：
你只需要关闭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;
          }
        }
  },

这是现场演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。