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

Question

在我正在处理的应用程序中，我有一个带有两个x轴的图表。两者都是category类型的（但我认为这是无关紧要的），所有系列都必须附加到第一个轴上，因此第二个没有相关数据。

问题在于，取决于图表的宽度，是否显示第二个轴标签。 我想始终渲染它们（因为它与第一个完全相关）。我尝试了很多事情：

• 要将linkedTo轴属性应用于第二个轴。无效，因为轴的表示错误。
• 为第二个轴分配一个序列。无效，因为数据的表示形式不是真实的，即使没有数据，轴也会遇到相同的问题。
• 我一直在尝试使用图表边距，但没有成功。

我在jsfiddle中创建了一个示例。在那里，您可以看到第二条轴如何渲染其水平线。如果您通过缩小元素来修改css类highcharts-figure，例如，设置宽度800px并再次呈现图表，则可以看到两个轴的标签。那是我的目标。但是我想要任何大小的图表。

此示例在v6.1.0中与Highcharts一起运行，因为该版本已安装在我的应用程序中，但是最新版本也发生了此问题。

你知道为什么会这样吗？

Answer 1

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

Answer 2

对我来说，这似乎也像个虫子。您能在Highcharts Github issue channel上举报吗？

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

  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

该错误是published in the highcharts github，此问题还有另一种解决方法。

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

{
    showInLegend: false,
    xAxis: 1
  }

这里有完整的示例：workaround。

（在我的原始帖子中，我说过我尝试了类似的解决方案-向第二个轴添加空序列-并且对我没有用。最有可能的是我做错了，因为我尝试过这种解决方法，并且效果很好。）