如何告诉 Highcharts 渲染器使视口变大？

Question

过去我根据系列在图表下方绘制了 tables。这是有效的，因为我可以告诉 Highcharts 垂直对齐图例，将其向左移动，并且我可以使用图例高度和定位以及 x 轴刻度信息来找出绘制 table 线的位置：

这利用了这样一个事实，即一旦我将图例设置为垂直，Highcharts 将在内部将视口（viewbox？）设置得足够大以使图例可见，并且由于我的 table 与传说中，也是可见的

现在我有一种情况需要在不基于系列的图表下方绘制一个table。我实际上将图例移动到图表的右上角，因为只有一个系列，而且它很适合那里。

我想出了如何根据 x 轴标签框尺寸（以及刻度信息）定位我的 table 线，但我的 table 延伸出视口（视框？）并且不可见：

如果我追根究底

myChart.renderer.box.setAttribute("viewBox", "0 0 1200 1200")

“缩小”，我可以看到我的整个 table 确实绘制了，它在 SVG 中：

那么 - 我如何告诉 Highcharts 渲染器向下扩展 viewport/viewbox/canvas（无论正确的术语是什么）以便在我添加我的 table 时它是可见的？

我从 redraw 事件处理程序触发 table 绘图，如果是设置一些 option/parameter 的问题，我可以很容易地计算出我需要计算多少预先扩展并将其包含在 chart.update({...stuff...}, true) 中，以便在我绘制 table.

时它的大小已经合适

或者我可以直接在代码中弄乱 chart.renderer，如果需要的话。

Answer 1

好的，明白了。

chart.renderer 具有 setSize 的功能，它将设置 SVG 根元素本身的整体大小，但是 SVG 根元素包含在“highcharts 容器”div，它有 inlineCSS 样式来设置高度和宽度，重要的是，有 overflow: hiddden，所以你必须还设置容器的高度 div 以便增加的 SVG 可见。幸运的是，可以在 chart.container.

轻松访问

在我的例子中，我需要在放大或缩小后有条件地绘制一个 table，所以在我实际绘制 table 的函数中，我还计算了它需要的高度和 return 这样我就可以在绘制 table 之后调整 SVG 根和容器 div。它看起来有点像这样：

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`;
    }
}

如何告诉 Highcharts 渲染器使视口变大？

How to tell the Highcharts renderer to make the viewport bigger?

javascript

svg

highcharts