图表的宽度正在影响我在 Highcharts 中的第二个 x 轴标签

Question

在我正在处理的应用程序中，我有一个带有两个 x 轴的图表。两者都是category类型（但我认为这无关紧要）并且所有系列都必须附加到第一个轴，所以第二个没有相关数据。问题在于，根据图表的宽度，是否呈现第二个轴标签。我想总是渲染它们（因为它与第一个完全相关）。我尝试了很多事情：linkedTo在第二个轴上应用轴属性。无效，因为轴的表示是错误的。将系列分配给第二个轴。无效，因为数据的表示不是真实的，即使它没有数据，轴也有同样的问题。我一直在玩图表边距，但没有成功。我在jsfiddle. 在那里你可以看到第二个轴是如何渲染它的水平线的。如果您修改 css 类highcharts-figure，通过缩小元素，例如，设置宽度800px并再次渲染图表，您可以看到两个轴的标签。这就是我的目标。但我希望它适用于任何大小的图表。此示例在 Highcharts 中运行，v6.1.0因为它是我的应用程序中安装的版本，但最新版本也会出现此问题。你知道为什么会这样吗？

Answer 1

这一定是个bug？我发现从 CSS 中完全删除宽度可以让它在所有宽度上正确渲染，但不幸的是初始渲染仍然是错误的。

Answer 2

这对我来说似乎也是一个错误。你能在Highcharts Github 问题频道上报告吗？

作为临时解决方法，您可以对此附加 xAxis 和“强制”图表进行更新以再次显示该轴。见演示。

  chart: {

    events: {

        load(){

        this.xAxis[1].update({

            visible: true

        })

      }

    }

  },

API

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Axis#update

Answer 3

该错误已在highcharts github中发布，并且此问题还有另一种解决方法。

基本上，它包括为第二个轴分配一个假序列，就像这样简单：

{

    showInLegend: false,

    xAxis: 1

  }

在这里你有完整的例子：workaround。

（在我原来的帖子中，我说过我尝试了一个类似的解决方案 - 将空系列添加到第二个轴 - 并且它对我不起作用。最有可能是我错了，因为我已经尝试过这种解决方法并且它工作正常。）