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

阅读更多

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

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

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

var countList = data.list;//ajax获得的从后台传递过来的List>集合，这个集合中的元素是一个map，每个元素的key是对应饼图的每块区域的name, vlaue则是每块代表的值的大小。
//解析成highcharts饼图所用的数据结构
var countData = [];
for(var i=0; i 
  
 本来这样做无可厚非，但是我发现竟然会在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）的区块的分布情况~
 
  
然而，静态饼图的绘制则没有如上限制。。