Question

我正在使用AmCharts创建一个饼图我正在尝试将我的mysql数据库中的数据分配给变量chartData 包含字段country和liters的字段。如何将我的mysql数据分配给chartdata？

 <script>
    var chart;
    var legend;



    var chartData = [{
    "country": "Czech Republic",
    "litres": 156.9
    },
    {
    "country": "Ireland",
    "litres": 131.1
    },
    {
    "country": "Germany",
    "litres": 115.8
    },
    {
    "country": "Australia",
    "litres": 109.9
    },
    {
    "country": "Austria",
    "litres": 108.3
    },
    {
    "country": "UK",
    "litres": 65
    },
    {
    "country": "Belgium",
    "litres": 50
    }
    ];

     AmCharts.ready(function () {
     // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";



  // LEGEND
   legend = new AmCharts.AmLegend();
        legend.align = "center";
        legend.markerType = "circle";
        chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
        chart.addLegend(legend);

        // WRITE
        chart.write("chartdiv");
    });
// changes label position (labelRadius)
function setLabelPosition() {

if (document.getElementById("rb1").checked) {


 chart.labelRadius = 30;


 chart.labelText = "[[title]]: [[value]]";


     } else {


 chart.labelRadius = -30;

    chart.labelText = "[[percents]]%";
    }
    chart.validateNow();
}


 // makes chart 2D/3D


function set3D() {
   if (document.getElementById("rb3").checked) {
        chart.depth3D = 10;
        chart.angle = 10;
    } else {
        chart.depth3D = 0;
        chart.angle = 0;
    }
    chart.validateNow();
}

// changes switch of the legend (x or v)
  function setSwitch() {
    if (document.getElementById("rb5").checked) {
    legend.switchType = "x";
 } else {
   legend.switchType = "v";
    }
 legend.validateNow();

}



     </script>

Answer 1

您无法从javascript直接访问您的mysql数据库。您将不得不向服务器询问一些数据。通常，您需要获取JSON格式化数据（使用ajax）：

Javascript（使用.getJSON()）：

$.getJSON('/get-my-data.php', function(json) {
    var chart;
    var legend;

    var chartData = json;

    AmCharts.ready(function () {
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = chartData;

        // code ...
    });
});

get-my-data.php（使用mysqli）：

$mysqli = new mysqli("localhost", "my_user", "my_password", "my_database");

$stats = array();

$query = "
    SELECT `country`, `litres`
    FROM `mytable`
";
$statement = $mysqli->prepare($query);

$result = $statement->get_result();
while ($data = $result->fetch_assoc())
{
    $stats[] = $data;
}

echo json_encode($stats);

Answer 2

如果您不想或不能使用jQuery，那么使用amCharts＆＃39;是一个内置的解决方案。拥有Data Loader插件。要使用它，只需在包含其余amCharts js文件的同一目录中包含plugins/dataloader/dataloader.min.js文件，然后将以下指令添加到图表配置中：

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "dataLoader": {
    "url": "data.php"
  },
  // the reset of your chart config
  // ..
});

在服务器端，您可以使用PHP函数json_encode()将数据格式化为JSON。即：

<?php
// load your data
// ...

// format as JSON
echo json_encode( $data );
?>

以下是有关该插件以及如何从MySQL服务器获取数据的更多信息：

http://www.amcharts.com/tutorials/using-data-loader-to-connect-charts-to-mysql-data-base/

在Chart中显示mysql数据库中的数据

2 个答案: