Angular 使用自定义按钮将高位图表导出到CSV

我有一个角度项目，我正在尝试将图表导出到不同的导出。当我尝试时，我能够将图表导出为png、jpeg、pdf、SVG等格式，但无法将图表导出为CSV或其他格式。我尝试了以下代码：

this.lineChart.chart.downloadCSV(); //For CSV

@ViewChild("lineChart", { static: false }) lineChart: any;
Highcharts = Highcharts;
chartOptions = {
series: [
  {
    name: "Current - 2014",
    data: [
      {
        name: "1",
        y: 200030
      },
      {
        name: "2",
        y: 23300
      },
      {
        name: "3",
        y: 2300
      },
      {
        name: "4",
        y: 23002
      },
      {
        name: "5",
        y: 340300
      },
      {
        name: "6",
        y: 263030
      },
      {
        name: "7",
        y: 530300
      },
      {
        name: "8",
        y: 880300
      },
      {
        name: "9",
        y: 232300
      },
      {
        name: "10",
        y: 34300
      },
      {
        name: "11",
        y: 200030
      },
      {
        name: "12",
        y: 980300
      }
    ],
    color: "indigo"
  },
  {
    name: "Prior - 2013",
    data: [
      {
        name: "1",
        y: 90030
      },
      {
        name: "2",
        y: 23300
      },
      {
        name: "3",
        y: 672300
      },
      {
        name: "4",
        y: 230300
      },
      {
        name: "5",
        y: 230300
      },
      {
        name: "6",
        y: 200030
      },
      {
        name: "7",
        y: 230300
      },
      {
        name: "8",
        y: 230300
      },
      {
        name: "9",
        y: 230300
      },
      {
        name: "10",
        y: 230300
      },
      {
        name: "11",
        y: 200030
      },
      {
        name: "12",
        y: 230300
      }
    ],
    color: "green"
  }
  ],
chart: {
  type: "line",
  renderTo: "chart",
  events: {
    load: function(event) {
    }
  }
},
title: {
  text: "Net activity along fiscal period accross years"
},
xAxis: {
  title: {
    text: "Fiscal Period"
  },
  type: "category"
},
yAxis: {
  title: {
    text: "Functional Amount"
  },
  gridLineWidth: 1
},
legend: {
  enabled: true,
  align: "right",
  verticalAlign: "middle",
  layout: "vertical"
},
credits: {
  enabled: false
},
plotOptions: {
  series: {
    allowPointSelect: true,
    minPointLength: 3,
    point: {
      events: {
        select: e => {
          console.log("x-axis value: ", e.target.name);
          console.log("y-axis value: ", e.target.y);
          let selectedPoint = this.lineChart.chart.getSelectedPoints();
          selectedPoint.forEach((point, index) => {
            console.log(
              "Point " + index + " : ",
              point.name + " - " + point.y
            );
          });
        },
        load: e => {
          this.lineChart.chart.reflow();
        },
        click: function(e) {
        }
      }
    }
  }
},
tooltip: {
  formatter: function() {
    return (
      this.series.name + "<br/>" + this.x + " : " + "<b>" + this.y + "<b>"
    );
  }
},
exporting: {
  enabled: true,
  showTable: false,
  fileName: "line-chart"
}};

有人能帮我吗。我尝试过的演示项目可从以下链接获得：

---

提前感谢大家。

我认为您的TS文件中缺少导入内容。尝试在组件中添加以下导入，然后重试：

import HC_exporting from "highcharts/modules/exporting";
import HC_Data from "highcharts/modules/export-data";
HC_exporting(Highcharts);
HC_Data(Highcharts);

---

我认为您缺少TS文件中的导入。尝试在组件中添加以下导入，然后重试：

import HC_exporting from "highcharts/modules/exporting";
import HC_Data from "highcharts/modules/export-data";
HC_exporting(Highcharts);
HC_Data(Highcharts);

---

首先导入脚本文件：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> 
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

}

例如：

---

参考：，

首先导入脚本文件：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> 
</script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

}

例如：

---

参考资料：，

您好，非常感谢。。。导出到svg的工作正常。。。。但导出到csv仍然失败。我已经更新了stackblitz中的回购协议，您能帮我导出到csv吗？回购——这个答案几乎是正确的。唯一需要更改的是模块的应用顺序：在导出数据之前应先加载

导出

模块。这样：

HC\u导出（Highcharts）；HC_数据（高位图表）这里解释了脚本的顺序：您好，非常感谢。。。导出到svg的工作正常。。。。但导出到csv仍然失败。我已经更新了stackblitz中的回购协议，您能帮我导出到csv吗？回购——这个答案几乎是正确的。唯一需要更改的是模块的应用顺序：在导出数据之前应先加载
导出
模块。这样：
HC\u导出（Highcharts）；HC_数据（高位图表）这里解释了脚本的顺序：谢谢@Krishna Pvs。我正在尝试的导出是一个外部按钮。现在，我要下载SVG fromat。但我仍然无法下载CSV。我也试过你的例子，但不起作用。downloadCSV选项未显示在按钮选项中。我不知道这是否可能。请对此发表评论。此外，我还尝试在角度应用程序中使用highcharts angular。现在我添加了导入：从“highcharts/modules/accessibility”导入可访问性；现在我没有得到错误。但它不是下载的。在尝试导出CSV时出现错误-“无法读取未定义的属性‘decimalPoint’”。我认为这是另一个问题。不在高图中，它来自您的应用程序，只需检查一次后台函数。谢谢@Krishna Pvs。我正在尝试的导出是一个外部按钮。现在，我要下载SVG fromat。但我仍然无法下载CSV。我也试过你的例子，但不起作用。downloadCSV选项未显示在按钮选项中。我不知道这是否可能。请对此发表评论。此外，我还尝试在角度应用程序中使用highcharts angular。现在我添加了导入：从“highcharts/modules/accessibility”导入可访问性；现在我没有得到错误。但它不是下载的。在尝试导出CSV时出现错误-“无法读取未定义的属性‘decimalPoint’”。我认为这是另一个问题。不在highcharts中，它来自应用程序，只需检查一次后台函数。