加载数据不呈现图表

我使用dataLoader从PHP/MySQL的后端在AmChart检索数据。但是，生成简单的serial条形图，但不知道渲染图的问题是什么，图形没有生成。加载数据不呈现图表

然后再次尝试使用ajax调用，我已经完成JSON响应对象通过循环的重新解析，就像generateChartData()一样，它是相同的数据。但仍然没有得到渲染。

这些选项，我传递给dataLoader

"dataLoader": { 
     "url": 'data.php', 
     "format": "json" 
}

在Ajax调用我打电话chart.validateData()，但是这是行不通的。能做些什么来解决这个问题？

设置async ajax请求的选项false发出警告并且不起作用。

这里是的js代码app.js：

var chartData = []; 
loadChartData(); 
function loadChartData() { 
var time = new Date(); 
var ajax = new XMLHttpRequest(); 
ajax.onreadystatechange = function() { 
    if (ajax.readyState == 4 && ajax.status == 200) { 
     var cur = new Date(); 
     var data = JSON.parse(ajax.responseText); 
     data.forEach(function(d, i) { 
      chartData.push({ 
       date: d.date, 
       visits: parseInt(d.visits, 10) 
      }); 
     }); 
     // alert('Request Completed in '+ (cur - time)+ ' mili seconds'); 
     console.log(chartData.length); 
     // chart.validateData(); 
    } 
}; 
ajax.open('GET', 'data.php', true); 
ajax.setRequestHeader("Content-type", "application/json"); 
ajax.send(); 
} 

var chart = AmCharts.makeChart("chartdiv", { 
"type": "serial", 
"theme": "light", 
"marginRight": 80, 
// "dataLoader": { 
//   "url": "data.php", 
//   "format": "json" 
// }, this doesn't work too! 
"dataProvider": chartData, 
"dataDateFormat": "YYYY-MM-DD", 
"valueAxes": [{ 
    "position": "left", 
    "title": "Energy Generated" 
}], 
"graphs": [{ 
    "id": "g1", 
    "fillAlphas": 0.4, 
    "valueField": "visits", 
    "balloonText": "<div style='margin:5px; font-size:19px;'><b>[[value]]kWh</b></div>" 
}], 
"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" 
}, 
"chartCursor": { 
    "categoryBalloonDateFormat": "JJ:NN, DD MMMM", 
    "cursorPosition": "mouse" 
}, 
"categoryField": "date", 
"categoryAxis": { 
    "minPeriod": "mm", 
    "parseDates": true 
}, 
}); 

// this method is called when chart is first inited as we listen for "dataUpdated" event 
function zoomChart() { 
// different zoom methods can be used - zoomToIndexes, zoomToDates,  zoomToCategoryValues 
    chart.zoomToIndexes(chart.dataProvider.length - 250, chart.dataProvider.length - 100); 
} 

zoomChart();

这里是我的的PHP代码data.php

$link = new mysqli("localhost", "root", "", "test"); 
if ($link->connect_errno) { 
    die ("Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error); 
} 

// Fetch the data 
$query = "SELECT * 
      FROM daily_visits 
      ORDER BY date ASC"; 

$result = $link->query($query); 

// All good? 
if (!$result) { 
    // Nope 
    $message = 'Invalid query: ' . $link->error . "\n"; 
    $message .= 'Whole query: ' . $query; 
    die($message); 
} 

$data = array(); 
while ($row = $result->fetch_assoc()) { 
    $data[] = $row; 
} 

echo json_encode($data); 
// Close the connection 
mysqli_close($link);

，且返回json看起来像

[{"date":"2016-09-03","visits":"16"},{"date":"2016-09-03","visits":"49"},...]

来源

2016-03-10 Hiren Chauhan

请发布您的完整代码和data.php返回的数据。否则，我们可以猜测可能是错的。 – martynasma

@martynasma更新了问题 –

@martynasma终于找到了一个解决方案。我必须将'date'字段的数据类型从'DATE'更改为'DATETIME'，并且一切正常，但是我仍然看到生成了一些不指向任何值的垂直线。我想知道它是否可以删除。 –

使用dataloader时，从makeChart中删除“dataProvider”：chartData。

来源

2016-05-17 18:42:01

你能提供一些关于如何解决这个问题的更多细节吗？这样，你的答案对阅读这个问题的任何人来说都将是一个更大的好处。 –

您应该更新图表实例：

let chartInstance = AmChart.makeCharts(...); 
(<any>this.chartInstance).dataProvider = parsedArray; // yes, here we update the dataProvider directly

如果有人不明白这一点，请在这里留言。

来源

2017-08-01 09:19:58 Steve

Thx @Julien Lopez我可怜的英语 – Steve

加载数据不呈现图表

回答

相关问题