Как продлить слайс каждые 5 секунд в amCharts? - PullRequest
Новая
       7

Как продлить слайс каждые 5 секунд в amCharts?

0 голосов
/ 28 ноября 2018

Можно ли RolloverSlice круговой диаграммы на основе секунд без события?Нажатие или наведение части диаграммы - это единственный способ переворачивать срез или есть возможность в любой момент отменить это по индексу, чтобы показывать части каждую секунду

Вот мой код 

<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/

1 Ответ

0 голосов
/ 28 ноября 2018

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>
...