Question

我尝试使用百分比值生成serialChart - 例如在x轴上我们将有国家列表，在y轴上我们将有百分比值 - 从0到100％。条形图显示一些值，总计为100％。我的问题是如何告诉＆＃34;总和代表100％的图表？如果我只是添加＆＃34;重新计算ToPercents＆＃34;：true到valueAxes对象，则会生成包含百分比值的图表，但不正确：

http://www.test.go1.pl/tmp/amChart_error.png

正确的图表应如下所示：

http://www.test.go1.pl/tmp/amChart_correct.png

以下是示例代码（错误图表）：

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",    
"dataProvider": [{
    "country": "Spain",
    "visits": 20
}, {
    "country": "Netherlands",
    "visits": 40
}, {
    "country": "Russia",
    "visits": 5
}, {
    "country": "South Korea",
    "visits": 15
}, {
    "country": "Canada",
    "visits": 15
}, {
    "country": "Brazil",
    "visits": 5
}],
"valueAxes": [{
    "recalculateToPercents":true,          
    "gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"      
}],
"chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
},
"categoryField": "country",
"categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
}

}）;

提前感谢您的帮助： - ）

Answer 1

尝试修改初始化代码，如下所示：

"balloonText": "[[category]]: <b>[[percents]]%</b>"

请注意关键字[[percents]]，这是另一个有用的关键字：[[total]]。

Answer 2

您必须自己进行计算并使用百分比值作为值字段。这并不困难：

百分比= 100 *值/总和;

如果您需要在工具提示或标签中包含实际值，只需将实际值添加到数据提供者，并在工具提示或标签中使用此字段，如：balloonText =“[[category] ]：[[realValue]]（[[value]]％）“;

Answer 3

在chart.ready(

之前添加此内容

 var sum = 0;
 var sumSubdata = 0;
 for (var x in chartData) {                    
     sum += chartData[x].visits;     
 }

 for (var x in chartData) {
     chartData[x].share = Math.round(chartData[x].visits / sum * 100);
 }

// Add the below line

graph.labelText = "[[value]] ([[share]])%";

Amcharts - 生成具有百分比值的序列图表

3 个答案: