最近需要给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)的区块的分布情况~
然而,静态饼图的绘制则没有如上限制。。
相关推荐
利用highCharts绘制饼图和柱状图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D...
主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制折线图、柱状图、饼状图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载...
主要介绍了jQuery插件HighCharts绘制2D带有Legend的饼图效果,结合实例形式分析了jQuery使用HighCharts绘制带明细显示的饼状图效果实现技巧,并附带了demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts实现的2D对数饼图效果,结合实例形式分析了jQuery图形插件HighCharts绘制2D对数饼图的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
下面小编就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。
什么曲线图、饼图,还有你从来都不知道的图都可以生成出来,现在用的比较多的是highcharts,echarts等,django-highcharts是django的一个集成库,使用它在django里更方便绘制出我们想要的图表,所以这篇文章就使用它...
例如,在绘制苹果与橙子的图表时,您可能希望始终为苹果使用绿色。 ##示例饼图 <?php use Phighchart \ Chart ; use Phighchart \ Options \ Container ; use Phighchart \ Options \ ExtendedContainer ; ...
这是一个插件,可使用用户提供的数据来绘制图表。 是免费的非商业用途Javascript库。 由于此插件使用它来渲染图表,因此您必须具有Highcharts许可证才能用作商业用途。 Highcharts是一个用纯JavaScript编写的图表...
AAInfographics是Kotlin的语言版本这是面向对象的,一组的易于使用,极其高雅图形绘制控制,基于流行的开源前端图表库Highcharts。 这样可以非常快速地向您的移动项目中添加交互式图表。 它支持单点触摸进行数据检查...
AAInfographics是Swift的语言版本这是面向对象的,一组的易于使用,极其高雅图形绘制控制,基于流行的开源前端图表库Highcharts。 这样可以非常快速地向您的移动项目中添加交互式图表。 它支持单点触摸进行数据检查...
宝藏测试代码的 URL: : 馅饼选项创建、更新、删除、列出和读取“馅饼”切片选项创建、更新、绘制和删除切片单击绘图,输入饼图编号,然后单击绘制切片。 将使用 HighCharts 创建饼图