使 ApexCharts 圓環圖的高度相等

Question

我正在使用 ApexCharts 的 React 版本，頁面上有許多這樣的圖表，我希望所有圖表的大小都相同，但是，圖表的大小似乎包括圖例的大小當它計算圖表大小時，與具有較少值的圖表相比，導致具有多個值的圖表被壓扁。

我試圖讓圖表大小在計算渲染大小時不考慮圖例大小，並讓圖例呈現在固定大小圖表下方，並占據它需要的任何大小。

我已經嘗試閱讀文檔並擺弄各種可用的圖表選項，但它們似乎都基於包括圖例在內的整個圖表容器應用大小和百分比，而不僅僅是圖表 svg 元素本身。

我怎樣才能做到這一點？

Answer 1

如果你想讓圖例脫離流程，你可以使用

legend: {
  floating: true
}

然后使用偏移設置圖例的位置。

Answer 2

正如您所說，“圖表的大小似乎在計算圖表大小時包括圖例的大小”，因此刪除圖例對我來說是最佳解決方案。 為了以相同的方式直觀地顯示圖例，我為圖表本身所在的塊添加了 styles。

legend: {floating: true} 

並添加 CSS -

svg {
    height: 350px;
    width: 550px;
}
foreignObject {
    height: 350px;
    width: 550px;
}

這讓我可以為不同的數據獲得相同的維度