【Highcharts饼图】动态给饼图添加数据时,绘制“卡住”的情形

探讨了Highcharts饼图在动态添加数据时遇到的问题,特别是饼图在数据分布不均匀时的绘制难题及解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近需要给highcharts的饼图添加数据,用到以下语法:

pieChart.addSeries({
      type:'pie',
      name:'数量分布',
      data:countData
});

 其中,pieChart为一个highcharts对象。countData的组成如下:

var countList = data.list;//ajax获得的从后台传递过来的List<Map<String, Object>>集合,这个集合中的元素是一个map,每个元素的key是对应饼图的每块区域的name, vlaue则是每块代表的值的大小。
//解析成highcharts饼图所用的数据结构
var countData = [];
for(var i=0; i<countList.length; i++) {
   var tmp = countList[i];
   countData.push([tmp.key, tmp.value]);
}

 本来这样做无可厚非,但是我发现竟然会在pieChart的addSeries操作之后重绘:pieChart.redraw()这里“卡住不动”。。半天没找到原因。

结果后来才发现,这种情况并不是每次都出现;而出现不能redraw的原因是此时饼图的数据结构类似如下:

[{name1:100, name2:0, name3:0, name4:0}]

仔细观察就会发现,传过来的数据只有name1对应的值不为0,其他都为0;当你动态添加数据时,只有一个区块有值,饼图是无法绘制或重绘的;结合饼图的本意不难理解:饼图是用于展示每种区块在数值上的“大小瓜分”情况的,当然是每个区块的值不为0才有实际意义~~

而当你解析过的数据结构如下:

[{name1:100, name2:10, name3:0, name4:0}]

时,即不是只存在一个数值不为0,但还是存在数值为0的区块时,这时候饼图的绘制能进行,但是饼图的显示会“错乱”(具体可自己尝试)。

 

解决办法:在后台处理,当一个区块的值不为0时,才把它对应的map加入集合里面。这样,动态绘制饼图时,饼图只会显示有数值(>0)的区块的分布情况~

然而,静态饼图的绘制则没有如上限制。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值