Amchart json url pie chart does not occur

问题

First of all I am very new to using JavaScript. I am trying to create a pie chart using the Amchart library, but the chart does not appear. It's not Cors. Microsoft has been added to work with asp.net.cors. I think the data is from the set. If I fix my ratings as a percentage, I think the error will be resolved. Could you suggest a solution? Thank you This is my code. What is wrong?

<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>

code here

回答1:

Your dataLoader definition has way too many properties. From your code, it only needs url and the optional format property; the rest of the properties belong to the chart itself.

Fixed code below:

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"
        }
});

Note that you also need to host the data on your server due to CORS restrictions on codepen (where the URL is pointing to).

来源：https://stackoverflow.com/questions/49106482/amchart-json-url-pie-chart-does-not-occur

标签

javascript

json

graph

pie-chart

amcharts