在amcharts中使用AmPieChart如何显示分组部分的总数?
Using AmPieChart in amcharts how do you display the total of the grouped section?
使用 groupPercent = 2.5 在 am 图表中创建饼图。显示了该部分的总百分比,但我无法让图表显示该部分的总数。有什么想法吗?
图表设置:
var chart = AmCharts.makeChart(context.chartName, chartSettings);
ChartTitle: "Sales Analysis
By Customer Code
Current Fiscal Year
Last Refreshed: 7/16/2015 10:23 AM"
angle: 30
balloonText: "[[title]]: [[View_Total_Sales_formatted]]"
categoryAxis: Object
position: ""__proto__: Object
dataProvider: Array[64]
depth3D: 20
export: Object
groupPercent: 2.5
groupedTitle: "Other: [[value]] ([[percents]]%)"
labelText: "[[title]]: [[View_Total_Sales_formatted]] ([[percents]]%)"
maxAngle: 60
maxDepth: 30
minAngle: 0
minDepth: 1
outlineAlpha: 0.4
startDuration: 0
theme: "light"
titleField: "view_Customer_Code"
type: "pie"
valueField: "View_Total_Sales"
"grouped" 切片的标签将使用相同的 labelText
属性。似乎您正在使用元代码 [[View_Total_Sales_formatted]]
来引用要显示的数据中的特定字段。自然地,分组切片无法汇总您的 string-based 多个自定义字段。
有几个解决方案:
1) 请改用 [[value]]
。它将汇总所有分组标题的值。图表可以对自身应用数字格式。有一些属性可以让您这样做:
http://docs.amcharts.com/3/javascriptcharts/AmPieChart#precision
http://docs.amcharts.com/3/javascriptcharts/AmPieChart#thousandsSeparator
http://docs.amcharts.com/3/javascriptcharts/AmPieChart#decimalSeparator
即:
labelText: "[[title]]: [[value]] ([[percents]]%)",
precision: 2,
thousandsSeparator: ",",
decimalSeparator: "."
2) 如果以上数字格式化选项不够用,可以使用labelFunction
指定自己的JavaScript代码来格式化标签。
labelFunction: function(item) {
// format value
var value = Math.round( item.value );
// format percent
var percent = Math.round( item.percents );
// format and return the label content
return item.title + ": " + value + " (" + percent + "%)";
}
下面是使用上述内容的完整设置:
var chartSettings = {
angle: 30,
balloonText: "[[title]]: [[View_Total_Sales_formatted]]",
dataProvider: [ {
"view_Customer_Code": "Lithuania",
"View_Total_Sales": 501.9
}, {
"view_Customer_Code": "Czech Republic",
"View_Total_Sales": 301.9
}, {
"view_Customer_Code": "Ireland",
"View_Total_Sales": 201.1
}, {
"view_Customer_Code": "Germany",
"View_Total_Sales": 165.8
}, {
"view_Customer_Code": "Australia",
"View_Total_Sales": 13.1
}, {
"view_Customer_Code": "Austria",
"View_Total_Sales": 12.3
}, {
"view_Customer_Code": "UK",
"View_Total_Sales": 9
}, {
"view_Customer_Code": "Belgium",
"View_Total_Sales": 6
}, {
"view_Customer_Code": "The Netherlands",
"View_Total_Sales": 5
} ],
depth3D: 20,
groupPercent: 2.5,
groupedTitle: "Other",
labelFunction: function(item) {
// format value
var value = Math.round( item.value );
// format percent
var percent = Math.round( item.percents );
// format and return the label content
return item.title + ": " + value + " (" + percent + "%)";
},
maxAngle: 60,
maxDepth: 30,
minAngle: 0,
minDepth: 1,
outlineAlpha: 0.4,
startDuration: 0,
theme: "light",
titleField: "view_Customer_Code",
type: "pie",
valueField: "View_Total_Sales"
};
var chart = AmCharts.makeChart( "chartdiv", chartSettings );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
使用 groupPercent = 2.5 在 am 图表中创建饼图。显示了该部分的总百分比,但我无法让图表显示该部分的总数。有什么想法吗?
图表设置:
var chart = AmCharts.makeChart(context.chartName, chartSettings);
ChartTitle: "Sales Analysis
By Customer Code
Current Fiscal Year
Last Refreshed: 7/16/2015 10:23 AM"
angle: 30
balloonText: "[[title]]: [[View_Total_Sales_formatted]]"
categoryAxis: Object
position: ""__proto__: Object
dataProvider: Array[64]
depth3D: 20
export: Object
groupPercent: 2.5
groupedTitle: "Other: [[value]] ([[percents]]%)"
labelText: "[[title]]: [[View_Total_Sales_formatted]] ([[percents]]%)"
maxAngle: 60
maxDepth: 30
minAngle: 0
minDepth: 1
outlineAlpha: 0.4
startDuration: 0
theme: "light"
titleField: "view_Customer_Code"
type: "pie"
valueField: "View_Total_Sales"
"grouped" 切片的标签将使用相同的 labelText
属性。似乎您正在使用元代码 [[View_Total_Sales_formatted]]
来引用要显示的数据中的特定字段。自然地,分组切片无法汇总您的 string-based 多个自定义字段。
有几个解决方案:
1) 请改用 [[value]]
。它将汇总所有分组标题的值。图表可以对自身应用数字格式。有一些属性可以让您这样做:
http://docs.amcharts.com/3/javascriptcharts/AmPieChart#precision http://docs.amcharts.com/3/javascriptcharts/AmPieChart#thousandsSeparator http://docs.amcharts.com/3/javascriptcharts/AmPieChart#decimalSeparator
即:
labelText: "[[title]]: [[value]] ([[percents]]%)",
precision: 2,
thousandsSeparator: ",",
decimalSeparator: "."
2) 如果以上数字格式化选项不够用,可以使用labelFunction
指定自己的JavaScript代码来格式化标签。
labelFunction: function(item) {
// format value
var value = Math.round( item.value );
// format percent
var percent = Math.round( item.percents );
// format and return the label content
return item.title + ": " + value + " (" + percent + "%)";
}
下面是使用上述内容的完整设置:
var chartSettings = {
angle: 30,
balloonText: "[[title]]: [[View_Total_Sales_formatted]]",
dataProvider: [ {
"view_Customer_Code": "Lithuania",
"View_Total_Sales": 501.9
}, {
"view_Customer_Code": "Czech Republic",
"View_Total_Sales": 301.9
}, {
"view_Customer_Code": "Ireland",
"View_Total_Sales": 201.1
}, {
"view_Customer_Code": "Germany",
"View_Total_Sales": 165.8
}, {
"view_Customer_Code": "Australia",
"View_Total_Sales": 13.1
}, {
"view_Customer_Code": "Austria",
"View_Total_Sales": 12.3
}, {
"view_Customer_Code": "UK",
"View_Total_Sales": 9
}, {
"view_Customer_Code": "Belgium",
"View_Total_Sales": 6
}, {
"view_Customer_Code": "The Netherlands",
"View_Total_Sales": 5
} ],
depth3D: 20,
groupPercent: 2.5,
groupedTitle: "Other",
labelFunction: function(item) {
// format value
var value = Math.round( item.value );
// format percent
var percent = Math.round( item.percents );
// format and return the label content
return item.title + ": " + value + " (" + percent + "%)";
},
maxAngle: 60,
maxDepth: 30,
minAngle: 0,
minDepth: 1,
outlineAlpha: 0.4,
startDuration: 0,
theme: "light",
titleField: "view_Customer_Code",
type: "pie",
valueField: "View_Total_Sales"
};
var chart = AmCharts.makeChart( "chartdiv", chartSettings );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>