javascript - AmPieChart 值和百分比

Question

有什么方法可以删除 AamPieCharts 中的值和百分比。我想仅在鼠标悬停时显示说明。应该有办法做到这一点。我们可以在 AmPieCharts 中隐藏“valueField”吗？我试图删除它但不起作用。尝试了很多方法但都失败了。我在下面附上了我的代码，其中包括 html5、css、js。

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.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>
<div id="chartdiv"></div>

CSS

#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}

.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}

JS

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"addClassNames": true,
"innerRadius": "0%",
"defs": {
"filter": [{
  "id": "shadow",
  "width": "200%",
  "height": "200%",
  "feOffset": {
    "result": "offOut",
    "in": "SourceAlpha",
    "dx": 0,
    "dy": 0
  },
  "feGaussianBlur": {
    "result": "blurOut",
    "in": "offOut",
    "stdDeviation": 5
  },
  "feBlend": {
    "in": "SourceGraphic",
    "in2": "blurOut",
    "mode": "normal"
  }
}]
},
"labelRadius": -50,
"labelText": "[[country]]",
"dataProvider": [ {
"country": "Business",
"text":"Description Here",
"value": 50
}, {
"country": "Projects",
"text":"Description Here",
"value": 50
}, {
"country": "Services",
"text":"Description Here",
"value": 50
 }, {
"country": "Admin",
"text":"Description Here",
"value": 50
}],
"valueField": "value",
"titleField": "text",
});

chart.addListener("init", handleInit);

chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});

function handleInit(){
chart.legend.addListener("rollOverItem", handleRollOver);
}

function handleRollOver(e){
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}

Answer 1

如果你想从鼠标悬停中删除百分比和值，你必须自定义 balloonText属性(property)。默认值为 "[[title]]: [[percents]]% ([[value]])\n[[description]]"，因此您只需设置 balloonText 属性到 "[[text]]" 或 "[[title]]" (因为它是您的 titleField)以提取您的描述字符串。

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"addClassNames": true,
"innerRadius": "0%",
"defs": {
"filter": [{
  "id": "shadow",
  "width": "200%",
  "height": "200%",
  "feOffset": {
    "result": "offOut",
    "in": "SourceAlpha",
    "dx": 0,
    "dy": 0
  },
  "feGaussianBlur": {
    "result": "blurOut",
    "in": "offOut",
    "stdDeviation": 5
  },
  "feBlend": {
    "in": "SourceGraphic",
    "in2": "blurOut",
    "mode": "normal"
  }
}]
},
"labelRadius": -50,
"labelText": "[[country]]",
"balloonText": "[[text]]",
"dataProvider": [ {
"country": "Business",
"text":"Description Here",
"value": 50
}, {
"country": "Projects",
"text":"Description Here",
"value": 50
}, {
"country": "Services",
"text":"Description Here",
"value": 50
 }, {
"country": "Admin",
"text":"Description Here",
"value": 50
}],
"valueField": "value",
"titleField": "text",
"legend": {}
});

chart.addListener("init", handleInit);

chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});

function handleInit(){
chart.legend.addListener("rollOverItem", handleRollOver);
}

function handleRollOver(e){
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}

#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}

.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.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>
<div id="chartdiv"></div>