amCharts饼-如何获取切片以在rollOverSlice上拉出? [英] amCharts pie - how to get slice to pull out on rollOverSlice?

问题描述

我在浏览amCharts Docs时遇到很多困难，而且我似乎无法在网上找到答案.

I am having a lot of difficulties navigating through amCharts Docs and I cant seem to find the answer to this online.

我正在使用amCharts饼图，并且我希望鼠标滑过一个切片时发生几件事，其中之一是获取切片以拉出单击此演示.

I am using the amCharts pie chart, and I want a couple of thing to happen when the mouse rolls over a slice, one of those things is to get the slice to pull out what happens when you click a slide in this demo.

这是我根据文档尝试过的方法，但似乎不起作用:

This is what I tried according to the doc, but doesn't seem to work:

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(); 
    });  

有人可以帮忙吗?

推荐答案

您不能直接触发提取，但是有一种方法可以模拟切片上的单击. (请参见 clickSlice )
此外，您还必须添加另一个监听器才能离开切片，因此它将返回其原始状态.

You can not trigger the pullout directly, but there's a method to simulate the clicking on the slice. (see clickSlice)
In addition you have to add another listener for leaving a slice, so it will return to its original state.

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

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

这是工作中的小提琴.

另一种方法是使用CSS仅更改切片的可视化.可以在此处找到该示例.

Here's the working fiddle.

Another approach would be to change just the visualization of the slice using CSS. An example for this can be found here.

这篇关于amCharts饼-如何获取切片以在rollOverSlice上拉出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！