PlotlyJS UNIX时间戳Xaxis

问题描述

如果我有一个unix时间戳作为我的xaxis，我该如何格式化xaxis刻度，使它们易于阅读。示例：

var x = [
    1599149438,1599152204,1599159972,1599162392,1599163074,1598638057,1598638162,1598638226,1598638737,1598886967,1598887053,1598887100,1598888440,1598888461,1598890461,1598891566,1598968484,1598968486,1598968890,1598969703,1598973067,1598991253,1599071690,1599071701,1599136836,1599137112,1599137318,1599137466,1599137670,1599150700,1599155337,1599155392,1599155577,1599235215,1599235282,1598976507,1598991992,1598992284,1598992486,1599064430,1599064971,1599066545,1599069206,1599069328,1599069429,1599071321,1599137701,1599139341,1599139739,1599139742,1599143693,1599144879,1599150125,1599155492,1599156034,1599162164,1599163112,1598634550,1598634555,1598637859,1598637942,1598638040,1598638649,1598639958,1598640067,1598640069,1598640159,1598640245,1598640257,1598640954,1598641170,1598649524,1598649560,1598884823,1598885218,1598885439,1598887054,1598890406,1598890465,1598892329,1598899069,1598903026,1598903207,1598903209,1598903305,1598903454,1598903458,1598968859,1598988950,1599064427,1599064600,1599065298,1599069186,1599071503,1599137132,1599142552,1599142554,1599142600,1599147475,1599151206,1599151209,1599233072,1599235214,1598637923,1598879892,1598885127,1598888004,1598890401,1598890430,1598891168,1598891349,1598891858,1598892218,1598897872,1598899068,1598899198,1598903025,1598967466,1598969602,1598970350,1598970387,1598970504,1598973061,1598978899,1598989060,1598989167,1598990662,1598990667,1598992523,1599057106,1599059031,1599064597,1599064854,1599065090,1599066202,1599066909,1599077441,1599137013,1599142759,1599142939,1599143690,1599144683,1599144913,1599147476,1599150607,1599150699,1599155252,1599234372,1599234511,1599234706,1599234781,1599235177,1598989250,1598889205,1599066930,1599067016,1598885039,1598885441,1598970289,1599139727,1599142955,1599155702,1599155836,1599156105,1599233225,1599233226,1599234812,1599234912,1598638124,1598638194,1598886968,1598886972,1598989172,1599155569,1598888562,1598889225,1598991163,1599057240,1599065194,1599066319,1599066405,1599066542,1599066887,1599071301,1599071757,1599071776,1599072050,1599136844,1599142567,1599149442,1599155431,1599232940,1599233052,1599233221,1599233644,1598638655,1599071505,1599235219,1598970796,1599150632,1599137485,1598884828,1598984576,1598984582,1599155930

];
var y = [0.18,0.38,0.56,0.46,0.59,0.4,0.78,0.77,0.74,0.42,0.45,0.39];
var data = [{
  x: x,y: y,type: 'histogram'
}];
var layout = {
  xaxis: {
    tickformat: "&H"  // For more formatting types,see: https://github.com/d3/d3-format/blob/master/README.md#locale_format
  }
}

Plotly.newPlot('myDiv',data,layout);

https://codepen.io/maxfridbe/pen/JjXvbqe?editable=true%3Dhttps%3A%2F%2Fplotly.com%2Fjavascript%2Ftick-formatting%2F

解决方法

不确定PlotlyJS是否能够进行转换，但是可以使用标准的JS函数重写时间戳：

var format = {year: '2-digit',month: '2-digit',day: '2-digit'};
var data = [{
  x: x.map(unix => Intl.DateTimeFormat('en-US',format).format(unix*1000)),type: 'histogram'
}];

Plotly.newPlot('myDiv',data);

Intl.DateTimeFormat()是我进行转换的首选方式，但是 Convert a Unix timestamp to time in JavaScript列出了更多选项。

此外，我删除了您的y数据。同时定义x和y值只有结合histfunc才有意义。

我对数据集进行迭代，并使用 new Date(timestamp) 将数组中的每个时间戳转换为 JS 日期对象，并将该数组转发到 Plotly.newPlot()。标准日期对象似乎被 Plotly 识别。