Question

这是我尝试使用的方法：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()会在console.log中生成这个HTML，有一种简单的方法可以将其转换为可下载的CSV文件吗？

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

Answer 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'
    );
};

甜！所以现在我所要做的就是调用这两个函数：

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

现在我需要做的就是清空空系列并修复时间格式并重命名文件。

如何使用highCharts

1 个答案: