javascript - ¿Cómo obtener solo ciertos datos en gráficos circulares de amcharts?

Estoy usando Amcharts en Angular 2. Estoy mostrando un gráfico circular y los datos se muestran en porcentajes. Sin embargo, quiero mostrar los datos según el porcentaje seleccionado por el usuario. Por ejemplo, si el usuario ingresa 50, quiero mostrar los datos por encima del 50%. ¿Alguien puede ayudar?

El siguiente es mi ejemplo de código.

this.supplierChart = this.AmCharts.makeChart("suppchartdiv", {
   "hideCredits":true,
   "title": 'Supplier Share',
   "type": "pie",
   "theme": "none",
   "dataProvider": supp_data,
   "labelText": "",
   "valueField": "quantity",
   "titleField": "Supplier",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
});

Aquí supp_data es algunos datos JSON para la entrada del gráfico

Respuesta #1

Si quieres simplemente ocultar las porciones que están por debajo de un umbral, establece un alphaField en tu gráfico, luego itera a través del arreglo chartData del gráfico y verifica la propiedad percents y ajusta selectivamente la propiedad alphaField de la porción a 0 si cae por debajo del umbral de tu usuario. Por ejemplo:

  var thresholdValue = /* get value from user somewhere */
  if (!thresholdValue) {
    chart.dataProvider.forEach(function(dataItem) {
      dataItem[chart.alphaField] = 1;
    })
  }
  else {
    chart.chartData.forEach(function(dataItem, idx) {
      if (dataItem.percents <= thresholdValue) {
        dataItem.dataContext[chart.alphaField] = 0;
        // or
        // chart.dataProvider[idx][chart.alphaField] = 0;
      }
    })
  }
  chart.validateData(); //update chart

Si estás usando el complemento de Angular, probablemente puedas envolver esta lógica dentro del callback updateChart.

Demostración de Vanilla JS a continuación:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [{
    "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
  }],
  "alphaField": "alpha",
  "valueField": "litres",
  "titleField": "country",
  "balloon": {
    "fixedPosition": true
  }
});

document.getElementById("update").addEventListener('click', function() {
  var thresholdValue = +document.getElementById('percent').value;
  if (!thresholdValue) {
    chart.dataProvider.forEach(function(dataItem) {
      dataItem[chart.alphaField] = 1;
    })
  }
  else {
    chart.chartData.forEach(function(dataItem, idx) {
      if (dataItem.percents <= thresholdValue) {
        dataItem.dataContext[chart.alphaField] = 0;
        // or
        // chart.dataProvider[idx][chart.alphaField] = 0;
      }
      else {
        dataItem.dataContext[chart.alphaField] = 1;
      }
    })
  }
  chart.validateData(); 
});

#chartdiv {
  width: 100%;
  height: 300px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<label>Filter percent value: <input type="text" id="percent"></label><button id="update">Update</button>