【问题标题】:Export data from highcharts in csv file with dates in milliseconds从 csv 文件中的 highcharts 导出数据,日期以毫秒为单位
【发布时间】:2018-11-26 16:17:01
【问题描述】:

我有一个带有 Highcharts 库的 angularjs 应用程序。

在我的应用程序中,我有一些图表并希望将图表的数据导出到 CSV 文件中。所以我使用了 highcharts 的导出功能,但日期有问题。在我的图表上,我以“MM/DD/YYYY hh:mm:ss”格式显示日期,所以当我导出数据时,我有相同的格式,但我会以毫秒为单位显示日期。我尝试更改导出选项中的“dateFormat”字段,但毫秒不是可接受格式的一部分。

这是我的图表选项:

widgetCtrl.chartDataLine = {
    chart: {
        type: 'spline',
        zoomType: 'x',
        isZoomed: false,
        marginTop:55
    },
    title: {
        text: 'title',
        align:'left',
        x: 20,
        y: 18,
        style: {
            fontSize: '14px'
        }
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Date time'
        }
    },
    yAxis: {
        title: {
            text: 'Power (W)'
        }
    },
    boost: {
        enabled: true
    },
    exporting: {
        fallbackToExportServer: false,
        enabled: true,
        allowHTML: true,
        filename: 'myFile',
        menuItemDefinitions: {
            downloadJSON: {
                onclick: function () {
                    downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
                },
                text: 'Download JSON'
            }
        },
        csv: {
            decimalPoint: '.',
            dateFormat: '%Y-%m-%d %H:%M:%S'
        },
        buttons: {
            contextButton: {
                menuItems: [
                    'printChart',
                    'downloadPNG',
                    'downloadJPEG',
                    'downloadPDF',
                    'downloadSVG',
                    'downloadCSV',
                    'downloadJSON'
                ]
            }
        }
    },
    navigation: {
        buttonOptions: {
            align: 'left'
        }
    }
    series: [...]
};

您知道如何在不编写 csv 文件而是使用 highcharts 函数的情况下做到这一点吗?

【问题讨论】:

  • 在传递给downloadJSON()之前需要map()系列并使用Date API解析和转换日期字符串

标签: angularjs csv highcharts export-to-csv


【解决方案1】:

不幸的是,Highcharts 没有以毫秒(时间戳)为单位导出数据的默认选项。但是,可以通过wrappingHighcharts.Chart.prototype.getDataRows方法轻松完成,并映射用于导出的数据数组。

(function(H) {
  H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
    var rows = proceed.call(this, multiLevelHeaders);

    rows = rows.map(row => {
      if (row.x) {
        row[0] = row.x;
      }
      return row;
    });

    return rows;
  });
}(Highcharts));

演示: https://jsfiddle.net/BlackLabel/5p1nvq37/

【讨论】:

    猜你喜欢
    • 2022-11-27
    • 1970-01-01
    • 2019-05-04
    • 1970-01-01
    • 1970-01-01
    • 2018-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多