amPieChart 中组合的负标签和值的分离

Question

有谁知道是否有办法拆分，amPieChart for amCharts v3 中的自动组合负标签。似乎它会自动将所有负值添加到一个名为“Other”的值中。如果只有一个值，则显示它和它的值，但如果有更多，则将它们加在一起并将标签替换为“其他”

我浏览了 amPieChart v3 documentation，但找不到任何这样做的东西：

Example

{ "country": "Belgium", "litres": -60 }, { "country": "The Netherlands", "litres": -50 }

Answer 1

饼图中的负值没有多大意义，AmCharts 的饼图不能很好地处理它们。想一想 - 你将如何真实地显示负片？

图表将低于groupPercent 阈值（默认为零）的值分组。如果您只想将分组删除到“其他”类别中，请将此值设置为足够小的负数以包含它。

AmCharts.makeChart("...", {
  // ...
  "groupPercent": -100, //sample value
});

如果您需要将这些值显示为切片，那么您必须提供绝对值作为您的 valueFields 并在您的显示字段中引用实数作为单独的属性，例如 balloonText 和图例的 valueText，即

var chartData = [
// ...
{
  "country": "Belgium",
  "absValue": 60,
  "litres": -60
},
// ...
];

AmCharts.makeChart("...", {
  // ...
  "valueField": "absValue",
  "balloonText": "[[title]]: [[litres]]",
  //...
  "legend": {
    "valueText": "[[litres]]",
    // ...
  }
});

以下使用绝对值的演示：

var chartData = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": -60
}, {
  "country": "The Netherlands",
  "litres": -50
}];

chartData.forEach(function(dataItem) {
  dataItem.absValue = Math.abs(dataItem.litres);
});


var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "startDuration": 0,
  "theme": "none",
  "addClassNames": true,
  "legend": {
    "valueText": "[[litres]]",
    "position": "right",
    "marginRight": 100,
    "autoMargins": false
  },
  "innerRadius": "30%",
  "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"
      }
    }]
  },
  "dataProvider": chartData,
  "valueField": "absValue",
  "balloonText": "[[title]]: [[litres]]",
  "titleField": "country",
  "export": {
    "enabled": true
  }
});

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>
<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" />
<div id="chartdiv"></div>