Question

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

然后另一次尝试使用ajax调用我已经完成了JSON对象的重新解析，通过循环就像generateChartData()一样，它是相同的数据。但是图表仍未呈现。

我已将这些选项传递给dataLoader

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

在ajax通话中，我拨打chart.validateData()，但这不起作用。可以做些什么来解决这个问题？

为ajax请求async设置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"},...]

Answer 1

使用dataloader时，从makeChart中删除＆＃34; dataProvider＆＃34;：chartData。

Answer 2

您应该更新图表的实例：

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

如果有人不理解这一点，请在此留言。

通过串行AmCharts中的`dataLoader`加载数据不会呈现图表

2 个答案: