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 文件，其中日期始终显示为“1970 年 1 月 1 日”。显然，这与 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 的输出以重新格式化来自非理想来源的日期。