Question

是否可以在没有事件的情况下根据秒数对饼图进行切片？单击或悬停图表的一部分是滚动切片的唯一方法，还是有通过索引进行循环以每秒显示部分的方法

这是我的代码

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="asset--chart"></div>       
<style>
#asset--chart {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
}   
</style>
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) {
        chartAsset.clickSlice(e.dataItem.index);
    });

这是小提琴：http://jsfiddle.net/Lrktmwa5/

Answer 1

AmCharts提供手动的rollOverSlice和rollOutSlice方法，该方法获取要模拟悬停和鼠标移出动作的切片的索引。您可以根据使用情况在setInterval或setTimeOut循环中调用它们：

var counter = 0;
setInterval(function() {
  //check if the previous slice is pulled out in order
  //to simulate a mouseout action to pull it back in for this chart
  if (chartAsset.chartData[(counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length].pulled) {
    chartAsset.rollOutSlice((counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length);
  }
  chartAsset.rollOverSlice(counter);
  counter = (counter + 1) % chartAsset.dataProvider.length;
}, 5000);

下面的演示

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) {
  chartAsset.clickSlice(e.dataItem.index);
});
chartAsset.addListener('rollOutSlice', function(e) {
  chartAsset.clickSlice(e.dataItem.index);
});
var counter = 0;
setInterval(function() {
  //check if the previous slice is pulled out in order
  //to simulate a mouseout action to pull it back in for this chart
  if (chartAsset.chartData[(counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length].pulled) {
    chartAsset.rollOutSlice((counter + (chartAsset.dataProvider.length - 1)) % chartAsset.dataProvider.length);
  }
  chartAsset.rollOverSlice(counter);
  counter = (counter + 1) % chartAsset.dataProvider.length;
}, 5000);

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}
#asset--chart {
  width: 100%;
  height: 100%;
  font-size: 11px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="asset--chart"></div>

如何在amCharts中每5秒翻转一次切片？

1 个答案: