Question

我有一个热图，底部有一些空间，我想摆脱它。我尝试了多个SO线程，建议我更改chart.marginBottom，chart.spacingBottom，x和yAxis边距，禁用图例等。不幸的是，我创建了一个jsfiddle并且无法复制该问题。 jsfiddle代码几乎与我的代码相同：http://jsfiddle.net/b637gdxv/1/

chart: {
        type: 'heatmap',
        marginTop: 26,
        marginLeft: 5,
        marginRight: 5,
        marginBottom: 5,

        width: 200, // - width when in one row 
        height: 250,

        borderWidth: 3,
        borderColor: 'grey',
        borderRadius: 5,
        plotBackgroundColor: '#FFFFFF',
        plotShadow: true
    },

以下是我页面上的图片：

注意底部的额外空间。很抱歉，我无法更具体地定义问题 - 我的页面和jsfiddle之间的区别让我感到困惑，而且我对javascript没有超级经验。有什么想法可以尝试吗？

Answer 1

Since we don't have enough code to really identify what you're issue is and you can't even reproduce it on jsfiddle, I'll give you a walkthrough of the steps I take to identify CSS issues and fix them - particularly when the CSS is applied dynamically.

If you're using IE, use the developer tools (F12). From the HTML tab click the "Select Element" tool (it looks like a pointer). Move the mouse to the outer box and it will garnish a slight grey border... click the mouse.

At this point - I think you'll have in the HTML pane the following tag highlighted:

<rect class=" highcharts-background" fill="#ffffff" stroke="grey" stroke-width="3" x="1.5" y="1.5" width="196" height="246" rx="5" ry="5" strokeWidth="3"/>

Note the attributes are clickable and can be changed on the fly.

At this point you can start tinkering with the styles (on the right pane) or even switch to the CSS pane (next to the HTML tab) and tinker around with the various CSS definitions.

There are different developer tools for each browser. Chrome has them built in as well and Firefox has the FireBug plugin to provide them. For this type of thing they come close to working the same way.

Let us know what you find and good luck!

Answer 2

我在使用我的热图时遇到了类似的问题，并更新了jsfiddle以显示问题：

http://jsfiddle.net/v1697qhj/

在该示例中，您会注意到热图的单元格未填充“chart.height”上设置的完整高度。我想知道问题是否因为划分为可用高度的行数不是偶数个像素，所以当highcharts以固定的像素高度绘制行时，剩余的总空间量会从未使用过。

有没有人知道是否有办法让Highcharts为每隔这么多行（或水平情况下的列）添加一个像素，以便热图的单元格总是填充可用的绘图区域？

chart: {
    type: 'heatmap',
    marginTop: 26,
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 5,
    width: 200,  
    height: 250,    // We want the cells to fill this entire height
    borderWidth: 3,
    borderColor: 'grey',
    borderRadius: 5,
    plotBackgroundColor: '#FFFFFF',
    plotShadow: true
}

Answer 3

进一步挖掘了高图JS的源代码，并找到了解决方法！这实际上受到计算轴刻度的逻辑的影响，因此在受影响的轴上将“endOnTick”选项设置为“false”似乎可以解决问题。 E.g。

yAxis: {
    labels: {
      enabled: false
    },
    endOnTick: false,  // This is the fix
    title: null,
    reversed: true
}

这是一个更新的jsfiddle，显示修复：

http://jsfiddle.net/e0av9wm1/

与以下内容比较，其中不包含修复：

http://jsfiddle.net/v1697qhj/

highcharts - 热图图表底部不需要的空间

3 个答案: