使用自定义按钮将高级图表导出为CSV

Question

我有一个Angular项目，我正在尝试将图表导出到其他导出中。当我尝试时，我能够将图表导出为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"
}};

我进入控制台时出错：

AppComponent.html:16 ERROR TypeError: Cannot read property 'decimalPoint' of undefined
    at d.Chart.b.Chart.getCSV (export-data.src.js:760)
    at d.Chart.b.Chart.downloadCSV (export-data.src.js:978)
    at AppComponent.export (app.component.ts:230)
    at Object.eval [as handleEvent] (AppComponent.html:16)
    at handleEvent (core.umd.js:sourcemap:29354)
    at callWithDebugContext (core.umd.js:sourcemap:30424)
    at Object.debugHandleEvent [as handleEvent] (core.umd.js:sourcemap:30151)
    at dispatchEvent (core.umd.js:sourcemap:20002)
    at eval (core.umd.js:sourcemap:28563)
    at HTMLButtonElement.eval (dom_renderer.ts:52)

有什么可以帮助我的吗？我尝试过的演示项目可在下面的链接中找到：

https://stackblitz.com/edit/angular-chart-export?file=src%2Fapp%2Fapp.component.ts

https://angular-chart-export.stackblitz.io

提前感谢大家。

Answer 1

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

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

Answer 2

首先导入脚本文件：

<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>

在chatOptions中，我们可以在高级图表菜单中写入customize options，我们可以自定义下拉选项。在图表选项中，我们可以这样写：

exporting: {
buttons: {
  contextButton: {
    menuItems: ['downloadCSV', 'downloadSVG'],
  },
},

}

示例：click here参考：click here，Example2