`

jqchart 使用的几点小技巧

 
阅读更多

官网demo地址:http://www.jqchart.com/jquery/chart

 

由于demo不能完全满足我的需求,所以做了以下改动。

需求1:需要数据曲线从左到右实时的更新

        在jqchart 初始化的时候,给series 中需要变化的曲线的data用一个数组来代替,上代码:

 

 series:[
                            {
                            	title: '动态数据',
                                type: 'line',
                                data: mydata,//外部定义的数组
                                markers: null,//不用圆点标示
                                strokeStyle: 'green'
                            }
                ]

 其中,mydata 是外面定义的一个js数组,那么如何实现曲线往右不断延伸呢,那么需要不断的往数组里添加数据,并更新 jqchart,上代码:

var mydata = [];
var myValue = 100;
var j=0;;
function updateChart() {
		     myValue += Math.random() * 10 - 5;

		     if(j<60){
		    	 mydata.push([j,round(myValue)]);
		         $('#jqChart').jqChart('update');//刷新jqchart
		         setTimeout("updateChart()", 1000);
	         }
	         j++;
        }

 

需求2:需要动态的增加曲线和取消曲线在界面上的显示

       由于demo中给的例子动态增加到是实现了,但是取消的话只给出了取消最后一条曲线的例子,不能取消指定的曲线,所以我在实现的时候,给要增加和删除的曲线预留了位置。上代码:

series:[
                            {
                            	title: '数据1',
                                type: 'line',
                                data: data,
                                markers: null,//拐点不用圆点标示
                                strokeStyle: '#000000'
                            },
                            null,//预留位置
                            {
                            	title: '动态数据',
                                type: 'line',
                                data: mydata,
                                markers: null,//不用圆点标示
                                strokeStyle: 'green'
                            }
]

 增加曲线:

var series = $('#jqChart').jqChart('option', 'series');
newSeries2 = {
			    title:'数据4',
	                    type: 'line',
	                    data: getRandomData(),
	                    markers:null,
	                    strokeStyle:'red'
	                };
	                // get the data from the first series
 series[1]=newSeries2;//给之前的预留位置赋值
 $('#jqChart').jqChart('update');

 删除曲线:

// get current series
var series = $('#jqChart').jqChart('option', 'series');
					
series[1]=null;//把预留位置的data置空
$('#jqChart').jqChart('update');//更新jqchart

 

分享到:
评论

相关推荐

    JQuery jqChart (JQuery 图表插件)

    总的来说,jQuery jqChart是一个强大且易于使用的图表插件,适合那些希望在Web应用中添加高质量数据可视化的开发者。其丰富的功能和易用性使其成为数据展示的理想选择。通过深入学习和实践,你可以充分利用jqChart为...

    jqChart官方原版下载,实例下载

    下面将详细介绍jqChart的相关知识点。 一、jqChart简介 jqChart是Tevko公司的产品,它提供了一套全面的图表类型,包括柱状图、折线图、饼图、散点图、甘特图等,满足各种数据展示需求。其特性包括自定义颜色、样式...

    jqchart实例+jqplot实例

    `jqChart` 是一个功能丰富的JavaScript图表库,它提供了一套易于使用的API,用于生成各种类型的图表,包括折线图、柱状图、饼图、散点图等。`jqChart` 支持多种数据源,如JSON、XML或纯文本,这使得数据集成变得简单...

    jqchart数据统计报表

    例如,你可以设置线的颜色、宽度、点的形状和大小,还可以添加网格线、图例、数据标签等元素,使得线性图既专业又易于理解。同时,jqChart支持实时数据更新,这在动态监控数据变化时尤为有用。 三、柱形图的魅力 ...

    jqChart扇形图下载

    在这个压缩包文件中,我们重点关注的是"jqChart扇形图"这一知识点。 扇形图是数据可视化中常用的一种图表,它以圆形为整体,通过划分不同的扇区来表示各部分占总体的比例关系。在jqChart中,创建扇形图可以帮助用户...

    ajax读取数据jqchart图表显示

    在本文中,我们将深入探讨如何使用Ajax技术读取数据,并结合JqChart库来创建动态且交互式的图表。首先,让我们了解Ajax的核心概念,然后详细分析JqChart库的使用,以及如何将从服务器获取的数据整合到图表中。 **...

    jqChart案例

    本篇主要介绍如何使用jqChart这一JavaScript图表库来创建各种统计图,并提供一个简单的案例作为参考。 **一、jqChart简介** jqChart是Telerik公司开发的一个强大的jQuery插件,它支持生成各种复杂的图表类型,如...

    jQchart 网页图表插件下载.rar

    **jQchart 网页图表插件详解** jQchart 是一款强大的JavaScript图表库,专为jQuery设计,用于在网页上创建各种...通过深入学习和实践压缩包中的实例,你可以更好地掌握jQchart 的使用技巧,提升网页图表开发的能力。

    jqchart0.03v

    ** jqchart0.03v 知识点详解** `jqchart` 是一款基于 jQuery 库的图表插件,主要用于创建各种数据可视化图形。在 Web 开发中,数据可视化是将复杂的数据集转换为易于理解的图形或图表的重要工具。jqChart 的出现,...

    jqchart线性统计图简单示例

    《jqChart线性统计图简单示例解析》 在数据可视化领域,统计图是一种非常重要的工具,它能够将复杂的数据以直观、易懂...通过学习和实践这个示例,开发者可以掌握数据可视化的基础技巧,进一步提升Web应用的用户体验。

    jqchart.rar

    《jqChart深度解析与实战应用》 jqChart是一款基于JavaScript的高级图表库,它由JQuery团队开发,专为Web应用程序提供数据可视化解决方案。这款免费版本的jqChart提供了丰富的图表类型,包括折线图、柱状图、饼图、...

    jqChart修改版下载,简单文档下载,包含配置方法

    以下是关于jqChart及其修改版的一些关键知识点: 1. **jqChart简介**:jqChart是Telerik公司开发的一款开源图表库,它基于jQuery框架,支持多种图表类型,包括折线图、柱状图、饼图、散点图等,能够满足多样化的...

    jqchart报表制作

    jqChart是一款基于jQuery的JavaScript图表库,用于在网页上绘制各种复杂的统计图表,如饼图、线图和条形图等。它提供了丰富的定制选项,能够满足用户对数据可视化的需求。下面我们将深入探讨如何利用jqChart来制作...

    jqchart柱状图

    在本案例中,我们将深入探讨如何使用jqChart创建一个简单的柱状图。 **一、jqChart的基本使用** 1. **引入jqChart库**:在HTML文件中,你需要首先引入jqChart的JavaScript和CSS文件。通常,这些文件可以从jqChart...

    jqGrid MVC demo(含jqChart)

    在这个`MVC demo`中,我们看到的是将`jqGrid`集成到ASP.NET MVC框架的应用实例,同时还有`jqChart`的使用,这是一个用于创建图表的jQuery插件。 **ASP.NET MVC框架** ASP.NET MVC是一种模型-视图-控制器(Model-...

    jQuery图表制作——jqchart的应用1

    本篇文章将深入探讨jqChart的使用方法,以及如何通过它来创建美观的数据展示。 1. jqChart简介 jqChart是由Tevko Inc.开发的,它是一款完全基于JavaScript和jQuery的图表组件。它支持HTML5 Canvas,提供了丰富的...

    jquery中jqchart.js

    jquery中jqchart.js,非常的不错

    jqChart ASPNET 图表控件

    在使用jqChart时,开发者可以利用其丰富的API来调整图表的颜色、大小、轴标签、图例、数据点样式等属性。例如,可以通过设置颜色方案来自定义图表的配色,通过修改轴的最小值和最大值来调整数据范围,甚至可以添加...

Global site tag (gtag.js) - Google Analytics