微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Amcharts v4 MySQL 不显示图表

如何解决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 举报,一经查实,本站将立刻删除。