带时间序列数据的Amchart散点图

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图使用Amcharts库绘制散点图，我的数据是时间序列。我米有一个困难时期绘制它，带时间序列数据的Amchart散点图

下面

是我的什么我都试过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/

什么我M任何建议做错了？

谢谢你的帮助。

回答：

您需要通过创建第二个数值轴并将它的type设置为"date"来指定您的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>

以上是 带时间序列数据的Amchart散点图 的全部内容， 来源链接： utcz.com/qa/263192.html

回到顶部