首先,我是使用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>
代码在这里
答案 0 :(得分:0)
您的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指向的位置),您还需要在服务器上托管数据。