`
Everyday都不同
  • 浏览: 723421 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

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

    博客分类:
  • jsp
阅读更多

最近需要给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绘制饼图和柱状图

    HighCharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种交互式的、美观的数据可视化图表,包括饼图和柱状图。本文将深入探讨如何利用HighCharts来绘制这两种图表,并分享一些关键知识点。 首先,我们从...

    highcharts 饼图

    在本篇中,我们将深入探讨Highcharts饼图的使用方法、特性以及常见配置。 首先,饼图是一种数据可视化工具,常用于展示各部分占整体的比例关系。Highcharts的饼图允许用户通过颜色、标签和数据点来清晰地表示各个...

    在Vue中使用highCharts绘制3d饼图的方法

    在Vue中使用HighCharts绘制3D饼图是一种常见的数据可视化方式。HighCharts是一款基于JavaScript的图表库,具有强大的数据可视化功能。下面是使用HighCharts绘制3D饼图在Vue中的实现方法: 首先,需要安装HighCharts...

    php饼图 jquery饼图

    虽然jQuery本身不直接支持饼图绘制,但可以与第三方库(如Chart.js或Morris.js)结合,实现动态交互的饼图。例如,使用jQuery与Chart.js创建饼图: 1. 引入库:引入jQuery和Chart.js的库文件。 2. HTML结构:创建一...

    jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;HighCharts 2D...

    highcharts快速生成百万数据点折线图.rar

    当添加或更新数据时,可以暂停重绘,直到所有数据处理完毕再一次性更新,这样可以减少频繁的渲染操作。 为了进一步提升用户体验,可以采用延迟渲染或懒加载技术。例如,当用户滚动到图表底部时,再加载更多的数据点...

    前端用Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    在前端开发中,数据可视化是不可或缺的一部分,Highcharts是一个强大的JavaScript图表库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及我们这里关注的Venn图(韦恩图)。Venn图是一种特殊的图表,常用于...

    用js实现的数据饼图

    在JavaScript(简称JS)中,实现数据饼图是一种常见的数据可视化技术,用于展示各项数据的比例关系。饼图通过分割扇形区域来表示每个部分占总体的百分比,它直观、简洁,非常适合用来展现数据分布。以下是一些关于...

    asp.net中绘制饼图柱状图

    在ASP.NET中,为了实现数据可视化,我们常常需要绘制饼图和柱状图。这些图表可以帮助用户直观地理解复杂的数据,比如对比不同类别的数量、比例或者趋势。本篇文章将详细探讨如何在ASP.NET环境中利用各种工具和技术来...

    JavaScript 三维报表 饼图

    JavaScript 三维饼图是一种在网页上展示数据的可视化方式,它通过立体的图形来表示不同类别数据的比例关系。这种图表通常由多个扇形区域组成,每个扇形代表一个类别,其大小对应于该类别的数据量占总数据量的比例。...

    asp.net中绘制饼图与棒图

    在ASP.NET中,为了实现数据可视化,我们常常需要在网页上绘制各种图表,如饼图和棒图。这些图表能够直观地展示复杂的数据,帮助用户理解信息。本篇将详细介绍如何在ASP.NET环境下利用不同的库和技术来绘制饼图与棒图...

    JS+FLASH曲线图、饼图显示

    在数据可视化领域,JavaScript可以用于创建动态、响应式的用户界面,特别是在现代浏览器中,借助各种库如D3.js、Highcharts、Chart.js等,可以轻松实现各种图表的绘制,包括曲线图和饼图。 1. **曲线图**:曲线图是...

    javascript饼图

    JavaScript饼图是一种常用的数据可视化工具,它以圆形图表的形式展示数据比例关系,每个扇区代表一个数据项,扇区的大小对应数据的比例。在网页开发中,饼图常用于直观地展示不同类别或部分在整体中所占的相对大小。...

    带有动画效果的饼图

    例如,当饼图数据发生变化时,各扇区可以通过旋转、缩放等动画方式动态调整,这样的设计不仅增强了视觉效果,也提高了数据的可读性。 在技术实现层面,有多种编程语言和库可以用于创建带有动画效果的饼图。以...

    highcharts加载多条曲线数据

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动图表,如折线图、柱状图、饼图等。在"highcharts加载多条曲线数据"的场景下,我们通常指的是在一个图表中同时展示多组数据,每组数据表现为一...

    ASP.net中绘制饼图与棒图

    总之,在ASP.NET中绘制饼图与棒图是数据可视化的基础技能,可以帮助开发者创建出直观、吸引人的数据展示界面。通过学习和实践,你可以根据具体需求灵活选择合适的绘图方法,提升Web应用的用户体验。

    Highcharts json demo

    本篇文章将深入探讨如何利用Highcharts结合JSON数据进行异步请求,以实现动态、实时的数据展示。 首先,我们要明白Highcharts的基本概念。Highcharts是一个基于HTML5 Canvas技术的图表库,它提供了丰富的图表类型,...

    highChart包(含HighCharts.js,可引用设置折线图、柱状图、饼图等)

    在给定的压缩包中,我们有"HighCharts.js"文件,这是HighCharts的核心库,包含了绘制各种图表所需的全部功能。 首先,`HighCharts.js`是HighCharts的核心JavaScript文件,通过引入这个文件,可以在网页中使用...

Global site tag (gtag.js) - Google Analytics