jqchart线性统计图简单示例资源-CSDN下载

共11个文件

js：7个

htm：3个

css：1个

jqchart

chart

jqchart

js统计图

5星 · 超过95%的资源需积分: 12 109 浏览量 2009-08-28 12:57:02 上传评论收藏 62KB RAR 举报

《jqChart线性统计图简单示例解析》在数据可视化领域，统计图是一种非常重要的工具，它能够将复杂的数据以直观、易懂的方式呈现出来。提到统计图，我们往往会想到各种图表，如柱状图、饼图、折线图等。然而，在Web开发中，这些图形并不总是以图片的形式存在。比如，jqChart就是这样一款基于JavaScript的统计图表库，它允许开发者动态生成具有交互性的图表，而无需依赖图像文件。 jqChart是一款功能强大的JavaScript图表库，它是基于jQuery框架的，因此能够很好地与现有的jQuery应用集成。在“jqChart线性统计图简单示例”中，我们将重点探讨如何利用jqChart创建线性图表，这种图表常用于显示数据随时间的变化趋势，或者比较不同数据系列之间的数值关系。我们需要在HTML页面中引入jQuery和jqChart的相关库文件。这通常包括jQuery核心库、jqChart的主库以及必要的CSS样式文件。然后，我们可以创建一个div元素作为图表的容器，并通过JavaScript来初始化图表。在JavaScript代码中，我们创建一个jqChart对象，设置其类型为“line”以创建线性图。接着，我们需要定义数据系列，每个系列对应图表中的一条线。数据可以是数组形式，每个元素代表一个数据点，或者是一个对象，包含x轴和y轴的值。例如： ```javascript var chart = $('#chart').jqChart({ title: '线性统计图', animation: { enabled: true }, series: [ { name: '数据系列1', data: [1, 2, 3, 4, 5] }, { name: '数据系列2', data: [5, 4, 3, 2, 1] } ], axes: { xaxis: { labels: ['点1', '点2', '点3', '点4', '点5'] }, yaxis: { minimum: 0, maximum: 6 } } }); ``` 这段代码创建了两个数据系列，每个系列包含五个数据点，x轴的标签是人为指定的，y轴的范围是从0到6。此外，我们还可以配置图表的各种外观和行为，如颜色、线条样式、动画效果等。在实际应用中，我们可能需要根据服务器返回的数据动态更新图表，或者添加交互功能，如鼠标悬停时显示数据点的具体值，点击图表进行筛选等。jqChart提供了丰富的API和事件处理机制，使得这些功能的实现变得简单易行。值得一提的是，`SimpleDemo`这个文件名可能指的是这个示例的源代码或运行结果。如果你拥有这个文件，可以通过查看其内容更深入地理解jqChart线性统计图的实现细节。总结来说，jqChart线性统计图简单示例展示了如何利用JavaScript和jQuery创建动态、交互式的线性图表，这在数据分析、监控、报告等场景中有着广泛的应用。通过学习和实践这个示例，开发者可以掌握数据可视化的基础技巧，进一步提升Web应用的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

JqueryChartSimpleDemo.rar （11个子文件）

SimpleDemo

nailwlTestEnvironment.htm 1KB

jQchart演示.htm 2KB

nailwlGetClientDataToCreateChart.htm 3KB

jQchartDemo

thickbox.css 4KB

jqchart.js 20KB

excanvas.js 9KB

jquery.form.js 23KB

common.js 7KB

jquery.js 56KB

thickbox.js 12KB

jquery-ui.min.js 73KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML> <HEAD> <TITLE>jQchart演示</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <META content="MSHTML 6.00.3790.4555" name=GENERATOR> <LINK media=screen href="jQchartDemo/thickbox.css" type=text/css rel=stylesheet> <SCRIPT src="jQchartDemo/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jQchartDemo/jquery.form.js" type=text/javascript></SCRIPT> <SCRIPT src="jQchartDemo/jquery-ui.min.js" type=text/javascript></SCRIPT> <SCRIPT src="jQchartDemo/thickbox.js" type=text/javascript></SCRIPT> <SCRIPT src="jQchartDemo/common.js" type=text/javascript></SCRIPT> <SCRIPT src="jQchartDemo/jqchart.js" type=text/javascript charset=utf-8></SCRIPT>  </HEAD> <BODY> <script> $(document).ready(function(){ //--demo1 测试换进是否可用 var chartSetting={data : [ [435,500,600,700,888,777,925] ]}; $('#canvasMyID').jQchart(chartSetting); //--demo2 添加静态数据预览效果 var chartSetting1={ config : { title : "Fucking Java web XY线图", titleLeft: 70, labelX : ["X1","X2","X3","X4","X5","X6","X7"], scaleY : {min: 0,max:1000,gap:200}, width: 400, //有影响 height: 300, //有影响 paddingL : 50, //有影响 paddingT : 50 //有影响 }, data : [ [435,500,600,700,888,777,925], [50,123,312,200,402,300,512], [100,400,790,640,128,347,567] ] }; $('#canvasMyID1').jQchart(chartSetting1); //--demo3 动态获得数据并展现，到了这里，相信做过程序的人都因该知道该怎么办了。 var arr = "["; //$("#dataTable").each(function(){ $('table > tbody > tr').each(function(){ arr += "[" $(this).find('td').each(function(){arr += $(this).text() + ",";}); arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。 arr += "],"; }); arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。 arr += "]"; arr = eval(arr);//这里arr必须以对象的形式赋值给data属性，见下面。 var chartSetting2={ config : { title : "Fucking Java web XY线图", titleLeft: 70, labelX : ["X1","X2","X3","X4","X5","X6","X7"], scaleY : {min: 0,max:1000,gap:200}, width: 400, //有影响 height: 300, //有影响 paddingL : 50, //有影响 paddingT : 50 //有影响 }, data : arr//这里arr必须以对象的形式赋值给data属性，见上面。 }; $('#canvasMyID2').jQchart(chartSetting2); }); </script> <canvas id="canvasMyID"></canvas> <canvas id="canvasMyID1"></canvas> <canvas id="canvasMyID2"></canvas>  <table id="dataTable"> <tr><td>435</td><td>498</td><td>459</td><td>111</td><td>567</td><td>761</td><td>534</td><td>185</td></tr> <tr><td>356</td><td>908</td><td>312</td><td>222</td><td>290</td><td>999</td><td>123</td><td>491</td></tr> <tr><td>198</td><td>123</td><td>709</td><td>333</td><td>762</td><td>111</td><td>459</td><td>917</td></tr> </table> </BODY> </HTML>

评论收藏

内容反馈