javascript - 时间序列数据的 Amchart 散点图

Question

我正在尝试使用 Amcharts 库绘制散点图，并且我的数据是时间序列的。我很难绘制它，

下面是我迄今为止尝试过的 JavaScript 代码:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "xy",
 "dataProvider": [{'nj6kJemGCxKx5dTxZ4dDNW': '95.025', 'lineColor': '#00ff00', 'x_axis_value': '0:10:06'}, {'nj6kJemGCxKx5dTxZ4dDNW': '94.067', 'lineColor': '#00ff00', 'x_axis_value': '0:10:07'}, {'nj6kJemGCxKx5dTxZ4dDNW': '98.055', 'lineColor': '#00ff00', 'x_axis_value': '0:10:08'}, {'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 'lineColor': '#00ff00', 'x_axis_value': '0:10:09'}, {'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 'lineColor': '#00ff00', 'x_axis_value': '0:10:10'}],
    "valueAxes": [ {
        "axisAlpha": 0,
        "dashLength": 1,
        "position": "left",
        "title": "Y Axis"
    }],
    "dataDateFormat": "JJ:NN:SS",
    "graphs": [{
        "balloonText": "x:[[x]] y:[[y]]",
        "bullet": "triangleUp",
        "lineAlpha": 0,
        "xField": "x_axis_value",
        "yField": "nj6kJemGCxKx5dTxZ4dDNW",
        "lineColor": "#FF6600",
        "fillAlphas": 0
    }],
}
);

这里是 JSFiddle:http://jsfiddle.net/Shivin15/o3kp2dqb/

对我做错了什么有什么建议吗？

感谢您的帮助。

Answer 1

您需要通过创建第二个值轴并设置其type来指定您的x轴是基于日期时间的。到“日期”。您还需要修复数据以包含两位数的小时数，因为单位数的小时数为 will not work在dataDateFormat

中

更新了演示:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "dataProvider": [{
    'nj6kJemGCxKx5dTxZ4dDNW': '95.025',
    'lineColor': '#00ff00',
    'x_axis_value': '00:10:06'
  }, {
    'nj6kJemGCxKx5dTxZ4dDNW': '94.067',
    'lineColor': '#00ff00',
    'x_axis_value': '00:10:07'
  }, {
    'nj6kJemGCxKx5dTxZ4dDNW': '98.055',
    'lineColor': '#00ff00',
    'x_axis_value': '00:10:08'
  }, {
    'nj6kJemGCxKx5dTxZ4dDNW': '97.136',
    'lineColor': '#00ff00',
    'x_axis_value': '00:10:09'
  }, {
    'nj6kJemGCxKx5dTxZ4dDNW': '97.136',
    'lineColor': '#00ff00',
    'x_axis_value': '00:10:10'
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "dashLength": 1,
    "position": "left",
    "title": "Y Axis"
  }, {
    "position": "bottom",
    "title": "X Axis",
    "type": "date"
  }],
  "dataDateFormat": "JJ:NN:SS",
  "graphs": [{
    "balloonText": "x:[[x]] y:[[y]]",
    "bullet": "triangleUp",
    "lineAlpha": 0,
    "xField": "x_axis_value",
    "yField": "nj6kJemGCxKx5dTxZ4dDNW",
    "lineColor": "#FF6600",
    "fillAlphas": 0
  }],
});

html, body {
  width: 100%;
  height: 100%;
}

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

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>