Я следую примеру кода this jsFiddle , чтобы нарисовать дополнительную таблицу в SVG Highcharts, чтобы ее можно было экспортировать в изображение при экспорте диаграммы.
Я могу нарисовать таблицу, которую хочу, но когда я экспортирую, моя дополнительная таблица не является частью изображения, она просто показывает диаграмму, как если бы я не делал никаких дополнительных рисунков.
Это важно отметить, я думаю, потому что, как и в примере с 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 для легенды, чтобы освободить место для таблицы в нижней части SVG, но это ничего не изменило, таблица все еще была не экспортируется.
Вот как настроен мой компонент. Я попытался включить все различные этапы, через которые он проходит, получая и обрабатывая данные, прежде чем фактически поместить их в диаграмму:
https://codesandbox.io/s/w7m53k6p37