Amcharts v4 MySQL 不显示图表

问题描述

我的图表未显示。如果我手动复制和粘贴查询结果,它会起作用。 工作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <style>
        body {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        }

        #chartdiv {
            width: 90%;
            height: 500px;
        }
    </style>

</head>
<body translate="no">
<script src="./lib4/core.js"></script>
<script src="./lib4/charts.js"></script>
<script src="./lib4/themes/animated.js"></script>
<div id="chartdiv"></div>

<script id="rendered-js">

    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv",am4charts.PieChart3D);
    chart.hiddenState.properties.opacity = 0;
    chart.innerRadius = 100;
    chart.legend = new am4charts.Legend();
    var title = chart.titles.create()
  title.text = "Population grow in year (2020)";
    chart.data = [{"ID":"1","country_name":"Suomi","total_number":"100","year":"2020"},{"ID":"2","country_name":"Ruotsi","total_number":"200",{"ID":"3","country_name":"Eesti","total_number":"50",{"ID":"4","country_name":"Tanska","total_number":"417",{"ID":"5","country_name":"norja",{"ID":"6","country_name":"Islanti","total_number":"531","year":"2020"}];


    var series = chart.series.push(new am4charts.PieSeries3D());
    series.datafields.value = "total_number";
    series.datafields.category = "country_name";
</script>
</body>

</html>

代码不显示图表, json_data 与我在工作代码示例 chart.data = [...] 中复制的相同 在 MysqL 版本中,我添加了下拉列表以选择年份。它可以正常工作并以正确的方式进行查询,如果 我复制了不同年份的结果并手动添加到上面的 chart.data = [...] 代码有效并且图表显示正常。 我使用的复制数据在下面的代码 json_data 中(我从 alert(json-data) 标题显示正确的文本并更改然后我在下拉列表中更改年份

    <script>
function show_graph (json_data,year) {
  alert (json_data);
  am4core.ready(function() {
 

 
  var chart = am4core.create("chartdiv",am4charts.PieChart3D);
  chart.hiddenState.properties.opacity = 0; 

  chart.legend = new am4charts.Legend();
  var title = chart.titles.create()
  title.text = "Population grow in year (" + year + ")";
  chart.data = json_data;
  chart.innerRadius = 100;
  
  var series = chart.series.push(new am4charts.PieSeries3D());
 
  series.datafields.value = "total_number";
  
  series.datafields.category = "country_name";
  
  }); 
}
</script>

我的代码有什么问题? 一定是这个折线图.data = json_data;

在控制台中看不到任何错误消息

我的json数据图片

jsodata from MySQl

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)