在 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 不需要 URL - 如果您使用 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"
    },
    // ...
});

完整的数据加载器文档可以在 github 页面here 上找到。