0

我正在关注这个 jsFiddle的代码示例，以便在 Highcharts SVG 中绘制一个附加表格，以便在导出图表时将其导出为图像。

我可以绘制我想要的表格，但是当我导出时，我的额外表格不是图像的一部分，它只是显示图表，就好像我没有完成任何额外的绘制一样。

我认为这很重要，因为在示例 jsFiddle 中，我将图例保留在其默认状态（水平，居中），并带有一个负值y，以欺骗 Highcharts 扩展图表下方的 SVG 区域以留出空间为表。但是，作为绘制表格的过程的一部分，我通过更改单个图例元素的tranform: translate()值来移动它们。

但是，当我尝试将图表导出到图像时，在图像中，图例恢复为水平并居中于图表下方，这表明 Highcharts 实际上并未读取“实时”SVG 信息，而是渲染了一些某种缓存版本，还是什么？

我正在使用脱机导出，这种行为是否是其结果？

我也在使用highcharts-react-official，我的导入和设置如下：

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Exporting from 'highcharts/modules/exporting';
import OfflineExporting from 'highcharts/modules/offline-exporting';

Exporting(Highcharts);
OfflineExporting(Highcharts);

export default class MyChart extends Component {
    // etc
}

这种行为与使用有关highcharts-react-official吗？

正如评论中所建议的，我尝试使用marginBottom图例的负 Y 值代替负 Y 值，以便为 SVG 底部的表格腾出空间，但这并没有改变任何东西，表格仍然没有导出。

这是我的组件的设置方式。我试图包括它在实际将数据放入图表之前接收和处理数据时所经历的所有不同阶段：

https://codesandbox.io/s/w7m53k6p37

4

0 回答 0