我是javascript的新手，我用amcharts库编写了制作饼图的代码。但代码不起作用。怎么了？你能帮助我吗。怎么能修复我的代码？
这是我的图书馆js
<html>
<title>Pie Chart Trying</title>
<meta charset="utf-8" />
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>`enter code here`
<div id="chartdiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get("http://localhost:8080/cinsiyet",
function (data, status) {
var turlerVeSayilar = { Memur: 0, işçi: 0, Sözleşmeli: 0, Geçici: 0, Firma: 0, Meclis: 0, Stajyer: 0, GeçiciMemur: 0, Diğer: 0 }
var personelTurVeSayilar = [];
$.each(data, function (index, item) {
switch (item.turu) {
case 'M':
turlerVeSayilar['Memur']++;
break;
case 'I':
turlerVeSayilar['İşçi']++;
break;
case 'S':
turlerVeSayilar['Sözleşmeli']++;
break;
case 'G':
turlerVeSayilar['Geçici']++;
break;
case 'F':
turlerVeSayilar['Firma']++;
break;
case 'L':
turlerVeSayilar['Meclis']++;
break;
case 'O':
turlerVeSayilar['Stajyer']++;
break;
case 'C':
turlerVeSayilar['GeçiciMemur']++;
break;
case 'D':
turlerVeSayilar['Diger']++;
break;
}
});
$.each(turlerVeSayilar, function (index, item) {
newitem = {}
newitem["tur"] = index;
newitem["sayi"] = item
personelTurVeSayilar.push(newitem);
//{tur: "memur", sayi: 3}
//{tur: "isci", sayi: 0}
//{tur: "sozlesmeli", sayi: 0}
//{tur: "gecici", sayi: 0}
//{tur: "firma", sayi: 2}
//{tur: "meclis", sayi: 0}
//{tur: "stajyer", sayi: 0}
//{tur: "geciciMemur", sayi: 0}
//{tur: "diger", sayi: 0}
});
var chart= AmCharts.makeChart("chartdiv",
{
"type": "pie",
"theme": "light",
//"categoryField": "tur",
//"rotate": true,
"valueField": "sayi",
"titleField": "tur",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true,
"startDuration": 1,
"labelRadius": 15,
"colors": [
"#FF0F00",
"#FF6600",
"#FF9E01",
"#FCD202",
"#4876ff",
"#B0DE09",
"#04D215",
"#0D8ECF",
"#0D52D1",
"#2A0CD0",
"#8A0CCF",
"#CD0D74",
"#754DEB",
"#DDDDDD",
"#999999",
"#333333",
"#000000",
"#57032A",
"#CA9726",
"#990000",
"#4B0C25",
],
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle",
"balloon": {},
/*"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
}
], */
"dataProvider": personelTurVeSayilar,
"export": {
"enabled": true
}
}
}
})
})
</script>
</body>
</html>
答案 0 :(得分：0)
与my last answer about your dataLoader section类似，这次您的export部分嵌套了太多属性，而且它也是重复的。不要在export部分内嵌入不正确的属性 - colors，startDuration，labelRadius legend不属于导出内部。除此之外，您还会将dataProvider，balloon和titles以及另一个export部分放在错误的位置;它们不是legend属性，需要移动到对象的顶部。
这里是固定代码：
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"valueField": "sayi",
"titleField": "tur",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"startDuration": 1,
"labelRadius": 15,
"colors": [
"#FF0F00",
"#FF6600",
"#FF9E01",
"#FCD202",
"#4876ff",
"#B0DE09",
"#04D215",
"#0D8ECF",
"#0D52D1",
"#2A0CD0",
"#8A0CCF",
"#CD0D74",
"#754DEB",
"#DDDDDD",
"#999999",
"#333333",
"#000000",
"#57032A",
"#CA9726",
"#990000",
"#4B0C25",
],
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle",
},
"balloon": {},
"dataProvider": personelTurVeSayilar,
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
}],
"export": {
"enabled": true
}
})
仔细比较您的代码以查看更改内容。我还建议您查看AmCharts网站上的demo code。
这是使用您的代码的工作演示：
var personelTurVeSayilar = [{
tur: "memur",
sayi: 3
},
{
tur: "isci",
sayi: 0
},
{
tur: "sozlesmeli",
sayi: 0
},
{
tur: "gecici",
sayi: 0
},
{
tur: "firma",
sayi: 2
},
{
tur: "meclis",
sayi: 0
},
{
tur: "stajyer",
sayi: 0
},
{
tur: "geciciMemur",
sayi: 0
},
{
tur: "diger",
sayi: 0
}
];
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"valueField": "sayi",
"titleField": "tur",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"startDuration": 1,
"labelRadius": 15,
"colors": [
"#FF0F00",
"#FF6600",
"#FF9E01",
"#FCD202",
"#4876ff",
"#B0DE09",
"#04D215",
"#0D8ECF",
"#0D52D1",
"#2A0CD0",
"#8A0CCF",
"#CD0D74",
"#754DEB",
"#DDDDDD",
"#999999",
"#333333",
"#000000",
"#57032A",
"#CA9726",
"#990000",
"#4B0C25",
],
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle",
},
"balloon": {},
"dataProvider": personelTurVeSayilar,
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
}],
"export": {
"enabled": true
}
})<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv" style="width: 100%; height: 400px"></div>