我试图使用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/
关于我做错的任何建议?
感谢您的帮助。
答案 0 :(得分:1)
您需要通过创建第二个值轴并将其type设置为"date"
来指定x轴是基于日期时间的。您还需要将数据修复为包含两位数小时,因为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>
&#13;