Question

我有一张Highcharts柱形图，我想要超级极小。只是酒吧，没有填充，没有标题，没有标签等。

我已经尝试了api的几个设置，但是我似乎无法在我构建的图表的左侧和右侧摆脱大约15px的填充。

我的图表设置如下：

    chart: {
        backgroundColor: 'transparent',
        borderWidth: 0,
        plotBackgroundColor: 'transparent',
        plotShadow: false,
        plotBorderWidth: 0,
        margin: 0,
        padding: 0,
        spacing: [0, 0, 0, 0]
    }

我认为设置为spacing的{{1}}会解决问题，但它没有。

我在这里打开了一个小提琴：http://jsfiddle.net/kMVB5/16/

Answer 1

只需将minPadding和maxPadding设置为0.请参阅：http://jsfiddle.net/kMVB5/26/

    xAxis: {
        gridLineColor: 'transparent',
        gridLineWidth: 0,
        lineColor: 'transparent',
        lineWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            enabled: false
        },
        tickWidth: 0,
        minPadding: 0,
        maxPadding: 0
    },

Answer 2

这将有助于删除所有左侧和右侧的空白区域。

plotOptions: {
   series: {
      groupPadding: 0
   }
}

检查this jsfiddle

Answer 3

根据你提供的小提琴，我找到了一种方法来擦除15px填充：在你的CSS中你有一个

div {
       text-align: center;  
       padding: 15px;  
}

<。>在.graph-wapper类中，只需删除填充：15px，它将被修复。

小心这可能会导致其他问题。

Answer 4

在xAxis部分的setOptions中，您可以添加元素：

min: data[0]

这会将xAxis中的最小值设置为数据数组的第一个元素。你可以看看here

希望它有所帮助！

编辑：实际上，这带来了一些问题。更好的方法是将min设置为0并将max设置为data.length，并将pointInterval设置为1，如this

此致

Highcharts：删除柱形图周围的填充

4 个答案: