Highcharts CSV导出，日期不正确

Question

我有一个返回JSON数据的API，如下所示：

[  
   {  
      "name":"Something",
      "data":[  
         {  
            "x":1541096421,
            "y":2
         },{  
            "x":1541436378,
            "y":4
         },{  
            "x":1553621371,
            "y":2
         }
       ]
   },{  
      "name":"Something else",
      "data":[  
         {  
            "x":1541096421,
            "y":2
         },{  
            "x":1541436378,
            "y":4
         },{  
            "x":1553621371,
            "y":2
         }
       ]
   }
]

x轴表示日期/时间，y轴表示分数。它被绘制在这样的图表上，使用一些格式将日期从毫秒时间戳转换为可读日期格式：

        function renderChart(data) {
            $('#chartContainer').highcharts({
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: chartTitle()
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Date completed',
                        scalable: false
                    },
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            if (true) {
                                return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
                            }
                            else {
                                if (this.value > 0 && this.value < 24) {
                                    return this.value;
                                }
                                else
                                    return 0;

                            }
                        }
                    },
                    tickPixelInterval: 100
                },
                yAxis: {
                    title: {
                        text: 'Score'
                    }
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5
                        }
                    }
                },
                series: data,
                exporting: {
                    buttons: {
                        contextButton: {
                            menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.filter(item => item !== 'openInCloud')
                        }
                    }
                    // Tried adding this but it doesn't make any difference:
                    /*,
                    csv: {
                        dateFormat: '%d/%m/%Y'
                    }*/
                },
                tooltip: {
                    formatter: function () {
                        return 'Score of <b>' + this.y + '</b> posted on <b>' + Highcharts.dateFormat('%d-%b-%y', moment.unix(this.x)) + '</b>';
                    }
                }
            });
        }

这很好用。但是，当我在前端的Highchart图表中单击“导出到CSV”时，它会输出一个CSV文件，其中日期始终显示为“18/01/1970”。显然这与API返回时间戳值这一事实有关，但我不知道如何修改CSV中的格式，类似于在图表渲染代码中完成的方式。

任何人都可以建议如何（最好不修改API返回的数据）让CSV以日/月/年格式输出正确的日期？

非常感谢

Answer 1

它可以通过包装Highcharts.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] = Highcharts.dateFormat('%d-%b-%y', row.x * 1000);
      }
      return row;
    });

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

演示：

• https://jsfiddle.net/BlackLabel/yafx8cb1/1/

文档：

• https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Answer 2

根据@ Core972的评论，此处的问题与API中的时间戳有关，该时间戳将日期返回为秒而不是毫秒。 我不相信有一种方法可以专门处理CSV导出中的日期格式，因此需要更改返回数据的API。

Wojciech Chmiel的回答演示了如何覆盖Highchart的输出以从非理想源重新格式化日期。