[英]Amchart scatter plot with time series data
I m trying to plot a scatter graph using Amcharts library and my data is in time series. 我正在尝试使用Amcharts库绘制散点图,而我的数据是按时间顺序排列的。 I m having a hard time to plot it,
我很难绘制它,
below is my javascript code for what I have tried, so far: 以下是到目前为止我尝试过的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
}],
}
);
here is JSFiddle: http://jsfiddle.net/Shivin15/o3kp2dqb/ 这是JSFiddle: http : //jsfiddle.net/Shivin15/o3kp2dqb/
Any suggestion on what I m doing wrong ? 关于我做错了什么建议吗?
Thank you for your help. 谢谢您的帮助。
You need to specify that your x axis is datetime-based by creating a second value axis and setting its type to "date"
. 您需要通过创建第二个值轴并将其类型设置为
"date"
来指定x轴基于"date"
。 You also need to fix your data to contain two-digit hours as single digit hours are will not work in dataDateFormat
您还需要修复数据以包含两位数小时,因为在
dataDateFormat
无法使用一位数小时
Updated demo: 更新的演示:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.