2017-06-14 65 views
0

如何从图例中删除值而不是文本。 如何在漏斗图框中添加'%'图标。 enter image description hereamChart将%值添加到渠道报告

我们只能将百分比值放在漏斗中,即26%。在传说中,我想把整个文本,即价值和百分比都放在一起。请相应帮忙。

回答

0

要更改漏斗图切片上的标签,请将labelText更改为所需的值。默认情况下,它设置为[[title]]: [[value]],但如果您只想要百分比值,则可以将其更改为[[percents]]%

对于图例,您必须设置图例的valueText。这是设置为[[value]]默认情况下,这样你就可以添加[[percents]]%它还有:

AmCharts.makeChart("chartdiv", { 
    // ... 
    labelText: "[[percents]]%", 
    legend: { 
    valueText: "[[value]] ([[percents]]%)", 
    valueWidth: 75, //you might also need to increase the valueWidth to add more space 
    // ... 
    }, 
    // ... 
}); 

演示如下:

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "funnel", 
 
    "theme": "light", 
 
    "labelText": "[[percents]]%", 
 
    "legend": { 
 
    "valueText": "[[value]] ([[percents]]%)", 
 
    "valueWidth": 75 
 
    }, 
 
    "dataProvider": [{ 
 
    "title": "Website visits", 
 
    "value": 300 
 
    }, { 
 
    "title": "Downloads", 
 
    "value": 123 
 
    }, { 
 
    "title": "Requested prices", 
 
    "value": 98 
 
    }, { 
 
    "title": "Contacted", 
 
    "value": 72 
 
    }], 
 
    "titleField": "title", 
 
    "marginRight": 160, 
 
    "marginLeft": 15, 
 
    "labelPosition": "right", 
 
    "funnelAlpha": 0.9, 
 
    "valueField": "value", 
 
    "startX": 0, 
 
    "neckWidth": "40%", 
 
    "startAlpha": 0, 
 
    "labelPosition": "center", 
 
    "outlineThickness": 1, 
 
    "neckHeight": "30%", 
 
    "balloonText": "[[title]]:<b>[[value]]</b>", 
 
    "export": { 
 
    "enabled": true 
 
    } 
 
});
#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/funnel.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> 
 
<div id="chartdiv"></div>