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

最新推荐文章于 2023-07-11 11:26:06 发布

Everyday都不同

最新推荐文章于 2023-07-11 11:26:06 发布

阅读量1.7k

点赞数

分类专栏： Highcharts 饼图绘制卡住

本文链接：https://blog.csdn.net/qq_18875541/article/details/69392618

版权

在使用Highcharts绘制饼图并动态添加数据时，遇到饼图在`redraw()`操作后卡住的问题。原因在于数据中只有一个区块值不为0，导致饼图无法正确绘制。解决方法是在后台处理数据，确保每个添加的区块都有非零值，从而避免饼图显示异常。静态饼图绘制不受此限制。

摘要由CSDN通过智能技术生成

最近需要给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，