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

Loading data via `dataLoader` in serial AmCharts does not renders the chart

本文关键字：数据 加载 AmCharts 中的 dataLoader      更新时间：2023-09-26

我正在使用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"},...]

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

您应该更新图表的实例：

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

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

相关文章：