在AmCharts中显示数据库中的数据

Question

我正在尝试使用AmCharts制作图表,并在他们的网站上关注此示例:https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/

我的原始代码是

var chart = AmCharts.makeChart("chart_1", {
        "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/",

        "dataProvider": [{
            "year": 2009,
            "income": 23.5,
            "expenses": 18.1
        }, {
            "year": 2010,
            "income": 26.2,
            "expenses": 22.8
        }],
            // bunch of graph stylings
    });

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() {
        chart.invalidateSize();
    });
}

我尝试从mysql加载数据

var chart = AmCharts.makeChart("chart_1", {
    "type": "serial",
    "dataProvider": {
        "url": "data.php"
    },
        "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/",

      // bunch on graphs style

    });

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() {
        chart.invalidateSize();
    });
}

包含硬编码数据的原始代码正在运行.下面用mysql不起作用.它是空白页面,不显示图表.控制台上也没有错误.

data.php 正在工作并返回json数组.

有人可以帮忙吗？

如果还需要php部分

$query = "
       SELECT *
       FROM my_chart_data
       ORDER BY category ASC";
$result = $link->query( $query );

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


// Set proper HTTP response headers
header( 'Content-Type: application/json' );

// Print out rows
$data = array();
while ( $row = $result->fetch_assoc() ) {
  $data[] = $row;
}
echo json_encode( $data );

Answer 1

在dataProvider不采取网址-你需要将其更改为dataLoader,如果你使用的DataLoader插件.要使用dataLoader插件,首先需要包含插件以及其他图表库,如下所示:

<!-- chart libraries -->
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<!-- include dataloader -->
<script type="text/javascript" src="//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

然后dataProvider改为dataLoader.dataLoader需要url:

var chart = AmCharts.makeChart("chart_1", {
    "type": "serial",
    "dataLoader": {
        "url": "data.php"
    },
    // ...
});

完整的dataloader文档可以在github页面上找到.