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

Question

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

1

Можно ли 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/

Godshand 28 нояб. 2018, в 11:22

Источник

Теги:

javascript

amcharts

1 ответ

Ещё вопросы

xorspark · Accepted Answer · 2018-11-28T11-28-00.000Z

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>

Я благодарю вас за это, сэр! Я думал, что нет никакого способа для этого :)
но сломанная круговая диаграмма для этого не поддерживается