amCharts馅饼 - 如何让片拉出上rollOverSlice?(amCharts pie -

2019-10-23 14:08发布

我有很多通过amCharts文档导航困难,我似乎无法找到这个问题的答案在网上。

我现在用的是amCharts饼图,我希望发生的一对夫妇的事情时,放在切片鼠标滚过,其中的一件事情是让片拉出来当您单击幻灯片会发生什么这个演示 。

这是根据DOC是我的尝试,但似乎并没有工作:

var pieChartData = [
    {
        asset: 'Funiture',
        marketValue: 50000.00
    }, {
        asset: 'Cash',
        marketValue: 6250.00
    }, {
        asset: 'Car',
        marketValue: 10000.00
    }, {
        asset: 'Other',
        marketValue: 11250.00
    }
];

    chartAsset = AmCharts.makeChart(
        'asset--chart', {
            type: 'pie',

            dataProvider: pieChartData,
            valueField: 'marketValue',
            titleField: 'asset',

            startEffect: 'easeOutSine',
            pulledField: 'pullOut',
            //pullOutOnlyOne: true,
            // pullOutEffect: 'easeInSine',

            responsive: {
              enabled: true
            },

            labelsEnabled: false,

            balloon: {
                fillAlpha: 0.95,
                borderThickness: 1,
                borderColor: '#000000',
                shadowAlpha: 0,
            }
        }
    );


    chartAsset.addListener('rollOverSlice', function(e) {
        console.log(e);

        /**** Doesn't work: ******/
        pieChartData[e.dataItem.index].pullOut = true;
        chartAssetAllocation.dataProvider = pieChartData;
        chartAssetAllocation.validateData(); 
    });  

是否有人可以帮助?

Answer 1:

你不能直接触发撤离,但有模拟片上点击的方法。 (见clickSlice )
此外,您必须添加其他听众离开片,所以它会返回到原来的状态。

    chartAsset.addListener('rollOverSlice', function(e) {
        chartAsset.clickSlice(e.dataItem.index);
    });

    chartAsset.addListener('rollOutSlice', function(e) {
        chartAsset.clickSlice(e.dataItem.index);
    });

这里的工作小提琴 。

另一种方法是改变使用CSS切片的只是可视化。 对于这方面的例子可以发现在这里 。



文章来源: amCharts pie - how to get slice to pull out on rollOverSlice?