加載數據不呈現圖表

我使用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

加載數據不呈現圖表

回答

相關問題