Question

我使用条形图哟显示饼图中选择的内容。饼图有"groupPercent": 5,，我无法改变这一点。 问题在于，当我选择饼图的＆＃34;其他＆＃34; 切片时，它会显示条形图中的所有数据。

我是否可以仅显示＆＃34;其他＆＃34; 切片中包含的内容？
我可以用JSon类型或类似的东西获取这些数据吗？

我认为解决方案靠近pullOutSlice监听器：

chart.addListener("pullOutSlice", function (event) {
        if (event.dataItem.dataContext.data != undefined) {
            var skus = event.dataItem.dataContext.data;

谢谢！

一些代码：

var chart = AmCharts.makeChart("resellersalespiechart", {
    "type": "pie",
    "theme": "light",
    "dataProvider": chartData,
    "valueField": "qty",
    "titleField": "reseller",
    "labelText": "[[title]]: [[value]]",
    "pullOutOnlyOne": true,
    "groupPercent": 5,
    "groupedTitle": "Otros",
    "legend": {
        "position": "bottom",
        "marginRight": 20,
        "autoMargins": false
    }
});

// create column chart
var chart2 = AmCharts.makeChart("resellersalesbarchart", {
    "type": "serial",
    "theme": "light",
    "pathToImages": "/lib/3/images/",
    "autoMargins": false,
    "marginLeft": 30,
    "marginRight": 8,
    "marginTop": 10,
    "marginBottom": 26,
    "titles": [{
        "text": "Todos los resellers"
    }],
    "dataProvider": collectiveData,
    "startDuration": 1,
    "graphs": [{
        "title": "projects",
        "type": "column",
        "fillAlphas": 0.8,
        "valueField": "qty",
        "balloonText": "[[category]]: <b>[[value]]</b>"
    }],
    "categoryField": "sku",
    "categoryAxis": {
        "gridPosition": "start",
        "autoGridCount": false,
        "gridCount": 12,
        "labelFunction": function (valueText, serialDataItem, categoryAxis) {
            return valueText;
        },
        "fontSize": 9
    },
    "valueAxes": [{
        "integersOnly": true,
        "fontSize": 9,
        "labelFunction": function (value, valueText, valueAxis) {
            if (value >= 1000) {
                return (value / 1000) + "K";
            } else {
                return valueText;
            }
        }
    }]
});

chart.addListener("pullInSlice", function (event) {
        if (event.dataItem.dataContext.skus != undefined) {

            chart1BarData = collectiveData;
            chart1BarTitle = "Todos los resellers"

            chart2.dataProvider = collectiveData;
            chart2.titles[0].text = "Todos los resellers";
            chart2.validateData();
            chart2.animateAgain();
        }
    });

图表示例： Image of the different views of charts

Answer 1

似乎没有直接的方法来做到这一点。您需要遍历dataProvider并聚合其计算的百分比值低于groupPercent阈值的元素，然后将每个元素的子数组聚合到条形图的dataProvider数组中。例如：

    if (event.dataItem.dataContext.skus != undefined) {

        chart1BarData = collectiveData;
        chart1BarTitle = "Todos los resellers"

        chart2.dataProvider = collectiveData;
        chart2.titles[0].text = "Todos los resellers";
        chart2.validateData();
        chart2.animateAgain();
    }
    else {
        var sum = event.chart.chartData.reduce(function(accumulator, dataElement) {
          return accumulator + dataElement.value;
        }, 0);
        var groupedElements = [];
        event.chart.dataProvider.forEach(function(dataElement) {
          if ((dataElement[event.chart.valueField] / sum) * 100 < event.chart.groupPercent) {
            groupedElements.push(dataElement);
          }
        });
        //aggregate/build chart dataProvider and assign to  chart2 here
    }

如何获取AmChart饼中的数据分组

1 个答案: