Разделение комбинированных отрицательных меток и значений в amPieChart - PullRequest
Новая
       67

Разделение комбинированных отрицательных меток и значений в amPieChart

1 голос
/ 24 сентября 2019

Кто-нибудь знает, есть ли способ разделения, автоматически комбинированные отрицательные метки в amPieChart для amCharts v3.Кажется, что он автоматически добавляет все отрицательные значения в одно, называемое «Другое».Если есть только одно значение, то оно выводит его и его значение, но если их больше, то оно складывает их вместе и заменяет метку на «Другое»

Я просмотрел документацию amPieChart v3 , но не смог найти ничего, что делает это:

Пример

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

1 Ответ

0 голосов
/ 27 сентября 2019

Отрицательные значения в круговой диаграмме не имеют большого смысла, и круговые диаграммы 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>
...