Экспорт верхнего графика в CSV с помощью пользовательской кнопки

Question

У меня есть проект Angular, и я пытаюсь экспортировать диаграмму в другой экспорт. Когда я попытался, я смог экспортировать диаграмму в формате png, jpeg, pdf, SVG et c. Но я не могу экспортировать график как 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 мы можем написать настроить параметры , в меню верхних графиков мы можем настроить параметры раскрывающегося списка. В опциях диаграммы мы можем написать так:

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

}

Пример: нажмите здесь Ссылка: нажмите здесь , Пример2