Question

我正在尝试通过使用来自URL http://portal.eyeo.se/datapump_amchart.ashx的dataloader插件从Web服务加载JSON输出来使用AmCharts创建图表。由于某些原因，您只能在此处看到我数据中的几项：http://portal.eyeo.se/historychart

我在做什么错了？

以下代码：

<script src="amcharts/amcharts.js"></script>
<script src="amcharts//serial.js"></script>
<script src="amcharts/plugins/export/export.min.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js"></script> 
<link rel="stylesheet" href="amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="amcharts/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "datapump_amchart.ashx",
"format": "json",
"async": "True"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"rotate": false,
"valueAxes": [{
"position": "left",
"title": "SensorVärde"
}],
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",dateformat that is wron
},
"graphs": [{
"valueField": "value1",
"id": "g1",
"bullets": "round",
"balloon": {
"drop": false,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 10,
"hideBulletsCount": 50,
"lineThickness": 5,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value1",
"fillAlphas": 0.4,
"balloonText": "<div style='margin:5px; font-size:10px;'>Sensorvärde:<b>[[value1]]</b></div>"

}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": "HH:NN:SS, DD MMMM",
"cursorPosition": "mouse"
},
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"export": {
"enabled": true
},
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>

Answer 1

问题是您基于日期的数据顺序错误。如the documentation中所述，当您使用parseDates时，它必须按升序排列。

重要：如果将其设置为true，则数据点需要按升序进行预排序。顺序不正确的数据可能会导致图表出现视觉和功能故障。

修正数据顺序应该可以解决您的问题。

使用dataloader插件将JSON数据加载到AmCharts中

1 个答案: