2017-01-25 4 views
0

export-csv for HighChartsКак конвертировать длинные строки в CSV, используя экспорт CSV плагин для Highcharts

Это метод, который я пытаюсь использовать: Chart.getCSV()

Примечание Я не использую Highcharts некрасиво меню выпадающий особенность. Их chart.options.exporting.enabled настроен false в нашем приложении. У нас есть еще одна кнопка, которая существует в другом компоненте, целью которого является создание CSV из диаграммы.

В соответствии с документами все, что мне нужно, - это вызвать .getCSV() на самом объекте диаграммы.

return priceLine 
.then(alertSeries) 
.then(tagLine) 
.then(renderChart(chart)) 
.then((chart) => { 
    // const pricelineData = chart.get('series-priceline').data; 
    // chart.options.navigator.series.data = pricelineData; 
    const csv = chart.getCSV(); 
    const array = csv.split(','); 
    console.log(csv) 
    console.log('array', array) 

    ChartExport.storeChart(chart); 
    this.chartLoading = false; 
    return chart; 
}); 

Диаграмма объекта: https://gist.github.com/leongaban/62ae997e45a697002f699ae0515a1321

Однако, когда я делать то, что я вижу, это 1 длинная строка, если я GetTable() Я вижу это в журнале из HTML, как бы вы преобразовать это в CSV? А затем загрузить его ?:

https://gist.github.com/leongaban/0edc8fb40b500a40a06e548b35a2adf7


массив const array = csv.split(','):

https://gist.github.com/leongaban/9110d2e9df9e1bf469e7909e962ef315


Их .getTable() будет производить этот HTML в console.log есть простой способ конвертировать это в загружаемый CSV-файл?

https://gist.github.com/leongaban/f60ea104b2528e7d5721dafc7be1c391

ответ

1

Ах так что не было никакой помощи в своих документах о том, как это сделать, но я смотрел на их исходный код и нашел это:

/** 
* Call this on click of 'Download CSV' button 
*/ 
Highcharts.Chart.prototype.downloadCSV = function() { 
    var csv = this.getCSV(true); 
    getContent(
     this, 
     'data:text/csv,\uFEFF' + encodeURIComponent(csv), 
     'csv', 
     csv, 
     'text/csv' 
    ); 
}; 

/** 
* Call this on click of 'Download XLS' button 
*/ 
Highcharts.Chart.prototype.downloadXLS = function() { 
    var uri = 'data:application/vnd.ms-excel;base64,', 
     template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' + 
      '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' + 
      '<x:Name>Ark1</x:Name>' + 
      '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' + 
      '<style>td{border:none;font-family: Calibri, sans-serif;} .number{mso-number-format:"0.00";}</style>' + 
      '<meta name=ProgId content=Excel.Sheet>' + 
      '<meta charset=UTF-8>' + 
      '</head><body>' + 
      this.getTable(true) + 
      '</body></html>', 
     base64 = function (s) { 
      return window.btoa(unescape(encodeURIComponent(s))); // #50 
     }; 
    getContent(
     this, 
     uri + base64(template), 
     'xls', 
     template, 
     'application/vnd.ms-excel' 
    ); 
}; 

Сладкое! Так что теперь все, что нужно сделать, это вызвать эти 2 функции:

this.downloadCsv =() => { 
    const csv = ChartExport.getChart().getCSV(); 
    console.log(csv); 
    this.$close(); 
    ChartExport.getChart().downloadXLS(); 
    ChartExport.getChart().downloadCSV(); 
}; 

Теперь все, что нужно сделать, это ясно из пустой серии и исправить форматы времени и переименовать файл.

 Смежные вопросы

  • Нет связанных вопросов^_^