amcharts餅圖代碼不起作用
[英]amcharts pie chart code not working
問題描述
我是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>
1 個解決方案
解決方案1
0 2018-03-12 10:57:06
與我對dataLoader部分的最后一個答案類似，這次，您的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網站上的演示代碼 。
這是使用您的代碼的工作示例：
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>
Amcharts-堆疊的柱狀圖/餅圖-減少其他堆疊/餅圖的不透明度
[英]Amcharts - Stacked Column/Pie chart - Reduce opacity of other stacks/pies
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.