javascript - 在amcharts中使用AmPieChart如何显示分组部分的总数？

Question

使用 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"

Answer 1

“分组”切片的标签将使用相同的 labelText 属性。您似乎正在使用元代码 [[View_Total_Sales_formatted]] 来引用要显示的数据中的特定字段。自然地，分组切片无法汇总您基于字符串的多个自定义字段。

有几个解决方案:

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>