過去，我根據該系列在圖表下方繪制了表格。這是因為我可以告訴 Highcharts 垂直對齊圖例，將其移動到左側，并且我可以使用圖例高度和位置以及 x 軸刻度資訊來確定在哪里繪制表格線：
這利用了這樣一個事實，即一旦我將圖例設定為垂直，Highcharts 將在內部將視口（視圖框？）設定為足夠大以使圖例可見，并且由于我的表格與圖例對齊，因此它也是可見的。
現在我有一種情況，我需要在圖表下方繪制一個不基于系列的表格。實際上，我將圖例移動到圖表的右上角，因為只有一個系列，而且非常適合那里。
我想出了如何根據 x 軸標簽框尺寸（以及刻度資訊）來定位我的表格線，但是我的表格延伸到視口之外（視圖框？）并且不可見：
如果我追求事實并做
myChart.renderer.box.setAttribute("viewBox", "0 0 1200 1200")
要“縮小”，我可以看到我的整個表格確實繪制了，它在 SVG 中：
那么 - 我如何告訴 Highcharts 渲染器向下擴展視口/視圖框/畫布（無論正確的術語是什么），以便在添加表格時它是可見的？
我從事件處理程式觸發表格繪制redraw，如果是設定一些選項/引數的問題，我可以輕松地進行計算，我需要預先確定要擴展多少并將其包含在 a 中chart.update({...stuff...}, true)，以便它的大小已經正確我去畫我的桌子。
或者chart.renderer，如果需要的話，我可以直接使用代碼。
uj5u.com熱心網友回復：
好的，想通了。
chart.renderer有一個函式 to setSize，它將設定 SVG 根元素本身的整體大小，但是SVG 根包含在“highcharts 容器”div中，它具有行內CSS 樣式來設定高度和寬度，重要的是，有overflow: hiddden，所以你有還要設定容器的高度，div以使增加的 SVG 可見。幸運的是，這很容易在chart.container.
在我的情況下，我需要在放大或縮小后有條件地繪制表格，所以在我的函式中實際繪制表格我還計算了它需要的高度并回傳，以便我可以div在表格之后調整 SVG 根和容器畫了。它看起來有點像這樣：
const drawTable = async (chart, dataForTable) => {
// figure out how much room the table is going to take up
const extraHeight = (rowHeight * dataForTable.length) littleExtraOffset
// create the SVG container for the table
const group = chart.renderer.g('bottom-table').add();
// draw all the lines for the table etc and add them to the group, then
return {
group,
extraHeight
}
}
const redrawEventHandler = (event) => {
// do stuff to figure out if we need to draw a table or not
let newWidth = baseWidth;
let newHeight = baseHeight;
if (shouldDrawTable) {
const { dataForTable } = this.props;
drawTable(event.target, dataForTable).then(tableResult => {
// save the table SVG group so we can easily destroy it later
this.tableGroup = tableResult.group;
// calculate the new total height
newHeight = tableResult.extraHeight;
this.chart.renderer.setSize(newWidth, newHeight);
this.chart.container.style.height = `${newHeight}px`;
});
} else {
// no table, newWidth and newHeight are still
// the original height and width
this.chart.renderer.setSize(newWidth, newHeight);
this.chart.container.style.height = `${newHeight}px`;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/465888.html
標籤：javascript svg 高图表
上一篇：save-svg-as-png不加載svgcss，同時將svg下載為png
下一篇：如何創建一個可點擊的svg影像圈