Amchart json url饼图不会发生

Posted 2021-05-05

首先，我是使用javascript的新手。我正在尝试使用Amchart库创建饼图，但图表不会出现。这不是科尔斯。 Microsoft已添加到asp.net.cors。我认为数据来自集合。如果我将评分修正为百分比，我认为错误将得到解决。你能建议一个解决方案吗？谢谢，这是我的代码。怎么了？

<title> trying pie chart</title>
<meta name="description" content="chart created using amCharts live editor" />

<!-- amCharts javascript sources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="https:http://cdn.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/black.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>


<!-- amCharts javascript code -->
<script type="text/javascript">
    AmCharts.makeChart("chartdiv",
        {
            "type": "pie",
            "theme": "black",
            "dataLoader": {
                "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218423/data1.json",
                "format": "json",
                "angle": 20.7,
                "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                "depth3D": 9,
                "labelRadius": 16,
                "labelText": "[[percents]]%",
                "labelTickAlpha": 0,
                "outlineAlpha": 0.49,
                "outlineThickness": 1,
                "titleField": "country",
                "valueField": "visits",
                "handDrawScatter": 0,
                "handDrawThickness": 0,
                "theme": "black",
                "allLabels": [],
                "balloon": {},
                "legend": {
                    "enabled": true,
                    "align": "center",
                    "markerType": "circle"
                }

            }
        });

</script>

代码在这里

答案

你的dataLoader定义有太多的属性。从您的代码中，它只需要url和可选的format属性;其余属性属于图表本身。

固定代码如下：

AmCharts.makeChart("chartdiv",
{
        "type": "pie",
        "theme": "black",
        "dataLoader": {
            "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218423/data1.json",
            "format": "json"
        },
        "angle": 20.7,
        "balloonText": "[[title]]<br><span style='font-size:14px' <b>[[value]]</b> ([[percents]]%)</span>",
        "depth3D": 9,
        "labelRadius": 16,
        "labelText": "[[percents]]%",
        "labelTickAlpha": 0,
        "outlineAlpha": 0.49,
        "outlineThickness": 1,
        "titleField": "country",
        "valueField": "visits",
        "handDrawScatter": 0,
        "handDrawThickness": 0,
        "theme": "black",
        "allLabels": [],
        "balloon": {},
        "legend": {
            "enabled": true,
            "align": "center",
            "markerType": "circle"
        }
});

请注意，由于对codepen的CORS限制（URL指向的位置），您还需要在服务器上托管数据。