Highcharts：动态更新导出文件名

Question

我正在使用 highcharts 创建各种图表，而且我还有一个月份选择器，以便用户可以选择要在图表上显示数据的月份。每次用户选择不同的日期时，都会加载一个新图表。由于 'exporting: filename' 在图表初始化期间仅设置一次，每次用户使用导出为 CSV 选项时，下载的文件都具有在图表初始化期间设置的名称。

我在 'exporting: filename' 选项中添加了一个 var 来读取 monthpicker 的值，使用这个：

var Name = $("#date_picker").val();

exporting: {enabled: true,
            filename: "Monthly Report: - " + Name + ""
           }

但当用户选择与初始页面加载期间设置的月份不同的月份时，它不会更新文件名。

我也试过向运行 downloadCSV 脚本添加一个按钮并以这种方式更新文件名：

var Name = $("#date_picker").val();
document.getElementById('button1').addEventListener('click', function () {
        highcharts.chart("report_chart").update({
                events: {
                    load: function () {
                        this.update({
                            exporting: {
                                filename: "Monthly Report - " + Name + ""
                            }
                        });
                    }
                }
             });
    });

但它并没有按照我想要的方式进行。

有没有办法动态更新导出的 CSV 文件名，使其包含用户在日期选择器中选择的月份？

Answer 1

您只需要更改 chart.update 中的文件名：

  chart.update({
    exporting: {
      filename: "Monthly Report: 2"
    }
  });

现场演示： http://jsfiddle.net/BlackLabel/1qyL0sej/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#update

Highcharts：动态更新导出文件名

Highcharts: Dynamically update export filename

javascript

filenames

highcharts

export-to-csv