Question

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

[  
   {  
      "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

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

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

Answer 2

可以通过包装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

Highcharts CSV导出，日期不正确

2 个答案: