Javascript 如何在AMSharts中每5秒滚动一次?
是否可以在没有事件的情况下,根据秒数滚动显示饼图? 单击或悬停图表的某个部分是滚动一个切片的唯一方法,还是可以通过索引进行循环,以每秒钟显示一次该部分 这是我的密码Javascript 如何在AMSharts中每5秒滚动一次?,javascript,amcharts,Javascript,Amcharts,是否可以在没有事件的情况下,根据秒数滚动显示饼图? 单击或悬停图表的某个部分是滚动一个切片的唯一方法,还是可以通过索引进行循环,以每秒钟显示一次该部分 这是我的密码 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/pie.js"></script> <script src="
<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);
});
#资产-图表{
宽度:100%;
高度:500px;
字体大小:11px;
}
变量数据=[
{
资产:“功能”,
市场价值:50000.00
}, {
资产:“现金”,
市场价值:6250.00
}, {
资产:“汽车”,
市场价值:10000.00
}, {
资产:'其他',
市场价值:11250.00
}
];
chartAsset=AmCharts.makeChart(
"资产--图表",{
键入“pie”,
数据提供者:pieChartData,
valueField:'市场价值',
标题栏:“资产”,
开始效果:“easeOutSine”,
pulledField:“拉出”,
//一个人:是的,
//pullOutEffect:“easeInSine”,
响应:{
已启用:true
},
labelsEnabled:false,
气球:{
fillAlpha:0.95,
边界厚度:1,
边框颜色:'#000000',
阴影Alpha:0,
}
}
);
chartAsset.addListener('rollOverSlice',函数(e){
chartAsset.clickSlice(如dataItem.index);
});
这里是小提琴: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=[{
资产:“功能”,
市场价值:50000.00
}, {
资产:“现金”,
市场价值:6250.00
}, {
资产:“汽车”,
市场价值:10000.00
}, {
资产:'其他',
市场价值:11250.00
}];
chartAsset=AmCharts.makeChart(
"资产--图表",{
键入“pie”,
数据提供者:pieChartData,
valueField:'市场价值',
标题栏:“资产”,
开始效果:“easeOutSine”,
pulledField:“拉出”,
//一个人:是的,
//pullOutEffect:“easeInSine”,
响应:{
已启用:true
},
labelsEnabled:false,
气球:{
fillAlpha:0.95,
边界厚度:1,
边框颜色:'#000000',
阴影Alpha:0,
}
}
);
chartAsset.addListener('rollOverSlice',函数(e){
chartAsset.clickSlice(如dataItem.index);
});
chartAsset.addListener('rollOutSlice',函数(e){
chartAsset.clickSlice(如dataItem.index);
});
var计数器=0;
setInterval(函数(){
//检查前一片是否按顺序拉出
//要模拟鼠标移出操作,请将其拉回到此图表中
如果(chartAsset.chartData[(计数器+(chartAsset.dataProvider.length-1))%chartAsset.dataProvider.length]{
chartAsset.rollOutSlice((计数器+(chartAsset.dataProvider.length-1))%chartAsset.dataProvider.length);
}
chartAsset.rollOverSlice(柜台);
计数器=(计数器+1)%chartAsset.dataProvider.length;
}, 5000);代码>
body,html{
宽度:100%;
身高:100%;
保证金:0;
}
#资产-图表{
宽度:100%;
身高:100%;
字体大小:11px;
}
谢谢您,先生!我认为没有这种方法:)但是这种方法不支持断饼图