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"
            }
         ]
      }
]
}

LINK TO FIDDLE

修改如何使网格线在图像 enter image description here

中标记的极值和中间偏离轴

Answer 1

正确的方式：
您只需要在clip

中关闭plotOptions即可

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

以下是Fiddle，也感谢Pawel Fus

<小时/> 棘手的方式：
这就是你想要的。我不会更新我以前的答案，因为这可能对其他人有帮助。但问题是图表被高亮图裁剪，所以我反过来删除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;

是的有点棘手，但它确实有效！这是LIVE DEMO

UPDATE：

这部分将是问题更新部分的答案：
我们应该格式化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;
          }
        }
  },

以下是LIVE DEMO

Answer 2

这是因为pointPlacement: "on"。所以只需删除这段代码：

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

当pointPlacement为“on”时，该点不会在柱形图中创建X轴的任何填充。

以下是fiddle

Answer 3

首先删除tickPositions，使用类别时不需要它们。然后你需要设置：

min： - 0.5
max：categories.length - 0.5（在您的情况下为10.5）
startOnTick：false
endOnTick：false

直播示例：http://jsfiddle.net/ASJm9/7/

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

3 个答案:

UPDATE：