Question

我有一组时间戳，如<botDetect:captcha id="miCaptcha" userInputID="captchaCode" codeLength="4" imageWidth="150" imageStyle="GRAFFITI2"/> <div id="tapa" style="background-color: #ffffd9;height: 10px;width: 150px;position: relative;top: -10px;"></div>。这里有[1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450]的3个值，1485343314150的2个值以及1485343314300和1485343314400的每个值

所以在绘制图表时

X = [1485343314150,1485343314300,1485343314400,1485343314450]

Y = [3,2,1,1]

我需要一种方法来表示这些X和Y，以便将Xs值转换为人类可读的日期时间，如2月24日下午5:25。

是否可以通过1485343314450或Chart.js完成？我搜索但找不到任何东西。

Answer 1

在AmCharts中，如果您使用的是序列图表，则可以在true（与X轴相同）中将parseDates设置为categoryAxis（线条，平滑行或列）。 AmCharts＆＃39; XY图表也可以通过设置valueAxes＆＃39;之一来处理日期。 type到"date"，但可用的图表类型仅限于行/项目符号

启用parseDates时，图表会自动将其格式化为使用可读日期字符串。您可以通过在categoryAxis中指定自己的dateFormats数组来调整格式。您可以在here找到更多相关信息。

以下是使用序列图表的示例。您的数据频率为毫秒级，因此我将categoryAxis设置为＆＃39; minPeriod以容纳：

＆＃13;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "timestamp": 1485343314150,
    "value": 3
  },{
    "timestamp": 1485343314300,
    "value": 2
  },{
    "timestamp": 1485343314400,
    "value": 1
  },{
    "timestamp": 1485343314450,
    "value": 1
  }],
  "graphs": [{
    "bullet": "round",
    "type": "smoothedLine",
    "valueField": "value"
  }],
  "categoryField": "timestamp",
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "fff"
  }
});

＆＃13;

#chartdiv {
  width: 100%;
  height: 300px;
}

＆＃13;

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

＆＃13;

您可以进一步格式化轴＆＃39;如前所述，通过dateFormats属性输出。在这种情况下，您将要更改fff期间的字符串。根据数据量，您可能还需要更改较大的期间。

使用Javascript绘制时间戳数据

1 个答案: