在串行 AmCharts 中通过“数据加载器”加载数据不会呈现图表

Question

我正在使用 dataLoader 从 PHP/MySql 后端检索 AmChart 中的数据。 但是生成了简单的serial 条形图，但不知道渲染图形有什么问题，图形没有生成。

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

这些选项我已经传递给dataLoader

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

在 ajax 调用中，我调用 chart.validateData() 但这不起作用。有什么办法可以解决这个问题？

为 ajax 请求 false 设置 async 选项会发出警告，但也不起作用。

这里是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"},...]

Answer 1

使用数据加载器时，从 makeChart 中删除“dataProvider”：chartData。

Answer 2

您应该更新图表的实例：

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

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