如何在 Highcharts 图表中向右移动列？

Question

我有一个带有 Highcharts 库的柱形图，如下所示：

如果您看到红线，您可能会注意到我想要实现的目标。我需要减少列之间的 space 并将它们移到右侧，这样图表的 y 标签和第一列之间会有更多 space。

请注意，我需要为每一列设置 48px 的固定宽度。我尝试使用 groupPadding : 0 和 pointPadding : 0 没有运气。

plotOptions : {
    series : {
        colorByPoint : true,
        pointWidth : 48,
        borderWidth : 0,
    }
},

所有示例代码在jsFiddle.

如何将所有列向右移动并减少列之间的 space？

更新： 正如答案所说，一种解决方案是将容器宽度更改为较小的宽度。但我需要网格线（灰色的）填满整个页面（实际上，填满比图表容器宽度更大的父 div）。是否可以在图表外绘制灰线（网格线）？

Answer 1

您的代码带有“,”

试试这个：

            plotOptions : {
                series : {
                    colorByPoint : true,
                    pointPadding : 0,
                    groupPadding : 0 
                }
            },

这是您的演示：http://jsfiddle.net/zgypy32h/5/

http://jsfiddle.net/zgypy32h/4/

Answer 2

这看起来更像您想要的：JSFiddle

有几件事给您带来了麻烦。由于 Highcharts 默认设置（请查看 reflow 选项），默认情况下图表希望尽可能多地填写它所在的 div。因此，为了使列靠在一起，您在您认为满足列间距的容器上设置了 max-width 或 width。

<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>

并在图表左侧给自己多一点余量作为补偿。

chart : {
  renderTo : 'container',
  type : 'column',
  showAxes : true,
  marginRight : 0,
  marginLeft : 50,
  spacingLeft : 20,
  spacingRight : 0
},

第二个是 y 轴标签的 offset，用于在它们与第一列之间留出一些间距。 Highcharts 似乎没有第一个 x 点的初始偏移量，但 offset 应该足够了。

yAxis: {
   offset: 60
}

Answer 3

我终于完成了@HristoIvanov 在中告诉我的事情。他们建议我应该在开头放置 NULL 列。

将第一个类别设置为 NULL 并且不显示它是我需要的，因为 highcharts 将 space 留给了第一列。

这就是我需要的代码：

xAxis : {
    showFirstLabel: false,
    categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
    [ ... ]

别忘了数据：

series : [
    { data : [null, 11, 22, 53, 74, 65, 46, 37] }

您可以在jsFiddle中查看结果。

如何在 Highcharts 图表中向右移动列？

How can I move columns to the right in a Highcharts chart?

javascript

charts

highcharts