圖表的寬度正在影響我在 Highcharts 中的第二個 x 軸標簽

Question

在我正在處理的應用程序中，我有一個帶有兩個 x 軸的圖表。 兩者都是category類型（但我認為這無關緊要）並且所有系列都必須附加到第一個軸上，因此第二個軸沒有相關數據。

問題在於，根據圖表的寬度，是否呈現第二個軸標簽。 我想總是渲染它們（因為它與第一個完全相關）。 我嘗試了很多事情：

• 在第二個軸上應用linkedTo軸屬性。 無效，因為軸的表示是錯誤的。
• 將系列分配給第二個軸。 無效，因為數據的表示不是真實的，即使它沒有數據，軸也有同樣的問題。
• 我一直在玩圖表邊距，但沒有成功。

我在jsfiddle創建了一個示例。 在那里你可以看到第二個軸是如何渲染它的水平線的。 如果您修改 css class highcharts-figure ，通過縮小元素，例如設置寬度為800px並再次渲染圖表，您可以看到兩個軸的標簽。 這就是我的目標。 但我希望它適用於任何大小的圖表。

此示例在v6.1.0中與 Highcharts 一起運行，因為它是我的應用程序中安裝的版本，但此問題也發生在最新版本中。

你知道為什么會這樣嗎？

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 。

（在我原來的帖子中，我說過我嘗試了一個類似的解決方案 - 將空系列添加到第二個軸 - 並且它對我不起作用。最有可能是我錯了，因為我已經嘗試過這種解決方法並且它工作正常。）