Amchart json url饼图不会发生 [英] Amchart json url pie chart does not occur

问题描述

首先，我对使用JavaScript非常陌生。
我正尝试使用Amchart库创建饼图，但图表未显示。这不是Cors。微软已被添加到与asp.net.cors合作。我认为数据来自于这个集合。如果我按百分比修正我的评分，我认为错误将得到解决。你能建议一个解决方案吗？
谢谢
这是我的代码。什么是错的？

 < title>尝试饼图< / title> 
< meta name =descriptioncontent =使用amCharts live editor创建的图表/> 
 
<！ -  amCharts javascript来源 - > 
< script src =https://www.amcharts.com/lib/3/amcharts.jstype =text / javascript>< / script> 
< script src =https：http：//cdn.amcharts.com/lib/3/pie.jstype =text / javascript>< / script> 
< script src =https://www.amcharts.com/lib/3/themes/black.jstype =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] ]  ，
depth3D：9，
labelRadius：16，
labelText：< / b> [[百分数]]％，
labelTickAlpha：0，
outlineAlpha：0.49，
outlineThickness：1，
titleField：country， 
valueField：visited，
handDrawScatter：0，
handDrawThickness：0，
theme：black，
allLabels ：[]，
 气球：{}，
legend：{
enabled：true，
align：center，
markerType：circle
} 
 
} 
}）; 
 
< / script> 
  

这里的代码

解决方案

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

下面的固定代码：

  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> [价格]] （[[百分比]]％），
depth3D：9，
labelRadius：16，
labelText ：[[percents]]％，
labelTickAlpha：0，
outlineAlpha：0.49，
outlineThickness：1，
titleField：国家，
valueField：拜访，
handDrawScatter：0，
handDrawThickness：0，
主题：黑色，
allLabels：[]，
气球：{}，
legend：{
enabled：true，
align：center，
markerType：circle
} 
 }）; 
  

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

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

解决方案

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

这篇关于Amchart json url饼图不会发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！