如何在 Next.js / React.js 中实现 Highcharts 的动态导出大小

Question

我正在使用 Next.js 和 Highcharts 开发一个项目，我需要为 Highcharts 导出实现动态导出大小。本质上，我希望允许用户导出不同尺寸的图表，例如小、中、大。我怎样才能实现这个功能？

          menuItems: [
            "downloadPNG", // this part will download 1090 x 1920
            {
              text: "Small", // this part will download 100 x 100
              onclick: function () {
                var confirmed = confirm("Are you sure you want to download the chart as PNG?");
                if (confirmed) {
                  this.exportChartLocal({
                    type: "image/png",
                    width: 100, // Set the desired width of the exported image
                    height: 100, // Set the desired height of the exported image
                });
                }
              },
            },
          ]

但是，我在使用这种方法时遇到了困难。任何人都可以提供有关如何在 Next.js / React.js 环境中实现 Highcharts 动态导出大小的指导吗？任何见解或替代解决方案将不胜感激。

Answer 1

如果您想将

chart.exportChartLocal(exportingOptions, chartOptions)

方法与自定义图表设置一起使用，则必须将它们作为第二个参数提供。然后将高度和宽度设置为

chartOptions.chart

的属性。

演示：https://jsfiddle.net/BlackLabel/7gdju1ty/
API：https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems
https://api.highcharts.com/class-reference/Highcharts.Chart#exportChart