`

jquery用jqplot插件画图例子

 
阅读更多
$.jqplot.config.enablePlugins = true;

    l1 = [2, 3, 1, 4, 3];
    l2 = [1, 4, 3, 2, 5];

    line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], ['2009-01-30', 8.2]];
    line2=[['2008-09-30', 3], ['2008-10-30', 5.5], ['2008-11-30', 5.7], ['2008-12-30', 10], ['2009-01-30', 9.2]];
    
    plot2 = $.jqplot('chart2', [line1,line2], {
        title:'Rotated Axis Text',
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                min:'August 30, 2008',
                tickInterval:'1 month',
                rendererOptions:{
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                    tickOptions:{formatString:'%b %#d, %Y', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal', fontStretch:1}
            }
        },
        series:[{lineWidth:4, markerOptions:{style:'square'}}]
    });
   
     line1 = [[4, 1], [4, 2], [3, 3], [16, 4]];
     line2 = [[3, 1], [7, 2], [4, 3], [3.125, 4]];
     plot3 = $.jqplot('chart3', [line1, line2], {
         //stackSeries: true,
         legend: {
             show: true,
             location: 'se'
         },
         title: '条形图',
         seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
                 barDirection: 'horizontal',
                 barPadding: 6,
                 barMargin: 10
             }
         },
         series: [{
             label: '1st Qtr'
         },
         {
             label: '2nd Qtr'
         }],
         axes: {
             yaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer,
                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
             },
             xaxis: {min: 0, max: 20, numberTicks:5}
         }
     });
   
     line1 = [[4, 1], [4, 2], [3, 3], [16, 4]];
     line2 = [[3, 1], [7, 2], [4, 3], [3.125, 4]];
     plot3 = $.jqplot('chart3d', [line1, line2], {
         stackSeries: true,
         legend: {
             show: true,
             location: 'se'
         },
         title: '条形图',
         seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
                 barDirection: 'horizontal',
                 barPadding: 6,
                 barMargin: 40
             }
         },
         series: [{
             label: '1st Qtr'
         },
         {
             label: '2nd Qtr'
         }],
         axes: {
             yaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer,
                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
             },
             xaxis: {min: 0, max: 20, numberTicks:5}
         }
     });
     line1 = [4, 2, 9, 16];
     line2 = [3, 7, 6.25, 3.125];
     plot3b = $.jqplot('chart3b', [line1, line2], {
         stackSeries: true,
         legend: {
             show: true,
             location: 'nw'
         },
         title: '柱状图1',
         seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
                 barPadding: 6,
                 barMargin: 40
             }
         },
         series: [{
             label: '1st Qtr'
         },
         {
             label: '2nd Qtr'
         }],
         axes: {
             xaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer,
                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
             },
             yaxis: {min: 0, max: 20, numberTicks:5}
         }
     }); 
    
     line1 = [4, 2, 9, 16];
     line2 = [3, 7, 6.25, 3.125];
     plot3c = $.jqplot('chart3c', [line1, line2], {
         legend: {
             show: true,
             location: 'nw'
         },
         title: '柱状图2',
         seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
                 barPadding: 6,
                 barMargin: 20
             }
         },
         series: [{
             label: '1st Qtr'
         },
         {
             label: '2nd Qtr'
         }],
         axes: {
             xaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer,
                 ticks: ['Q1', 'Q2', 'Q3', 'Q4']
             },
             yaxis: {min: 0, max: 20, numberTicks:5}
         }
     });  
//  
   line1 = [['item1', 3], ['item2', 7], ['item3', 2.5], ['item4', 6], ['item5', 5], ['item6', 4]];
   line2 = [3, 7, 2.5, 6, 5, 4];
  
   plot4 = $.jqplot('chart4', [line1], {
     title: '饼图1',
     seriesDefaults:{renderer:$.jqplot.PieRenderer},
     legend:{show:true}
   });
   line1 = [['item1', 3], ['item2', 7], ['item3', 2.5], ['item4', 6], ['item5', 5], ['item6', 4]];
   line2 = [3, 7, 2.5, 6, 5, 4];
  
   plot4 = $.jqplot('chart4b', [line1], {
     title: '饼图2',
     seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:4}},
     legend:{show:true}
   });
     l1 = [2.2, 3, .6, 4.8, 3];
     l2 = [1, 4, 3, 2, 5.7];
     l3 = [1, 5, 6, 7, 5.7];
 
 
    plot5 = $.jqplot('chart5', [l1, l2,l3]);
分享到:
评论

相关推荐

    jquery画图插件jqplot例子+中文教程

    jqPlot是jQuery生态的一部分,因此,如果你已经熟悉jQuery,那么使用jqPlot将会非常方便。 ### jqPlot基本概念 1. **图表对象**:jqPlot的核心是图表对象,通过创建一个新的图表实例,可以配置各种参数来定制图表...

    jquery.jqplot.0.9.3.zip

    强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的...

    Jquery的画图插件-jqPlot

    **jqPlot:jQuery的高效画图插件** **1. jqPlot简介** jqPlot是基于JavaScript库jQuery的一个强大图表绘制插件,它提供了丰富的图表类型和自定义选项,使得在Web应用中创建交互式图表变得极其简单。jqPlot能够轻松...

    jquery.jqplot 绘图插件

    jqPlot的基本使用步骤包括引入jQuery库和jqPlot库,然后选择一个DOM元素作为图表容器,并调用`.jqplot()`方法进行绘制。例如: ```html <script src="jquery.js"> <script src="jqplot.js"> <div id="chart1">...

    jquery charts插件jqplot

    使用jqPlot首先需要在项目中引入jQuery库,然后引入jqPlot的JavaScript和CSS文件。通常,这些文件位于dist目录下,包括`jquery.jqplot.js`和`jqplot.css`。在HTML头部添加链接即可。 2. **绘制线图** jqPlot的...

    jquery.jqplot--作图插件

    6. **文档支持**:`docs`目录中的文档提供了详细的API参考和示例,帮助开发者更好地理解和使用jqPlot。 ### 二、jqPlot的使用步骤 1. **引入依赖**:首先需要在HTML页面中引入jQuery库和jqPlot的主文件以及需要的...

    jquery.jqplot.1.0.7最新插件

    ### 使用jqPlot的基本步骤 1. **引入依赖**:在HTML文件中引入jQuery库和jqPlot的JS和CSS文件。 2. **准备数据**:整理你要展示的数据,可以是数组形式。 3. **选择容器**:在HTML中设置一个用于显示图表的div...

    jquery.jqplot.1.0.8r1250

    jQuery.jqPlot的核心理念是简化图表绘制过程,通过简洁的API和丰富的插件系统,使得开发者能够快速地将数据转化为直观的图形。它支持多种图表类型,包括但不限于线性图、散点图、面积图、饼图、条形图以及热力图,...

    jquery.jqplot.1.0.9.d96a669

    《jQuery.jqPlot 1.0.9:数据可视化库的深度解析》 在Web开发领域,数据可视化是一项至关重要的任务,它可以帮助用户理解和解读复杂的数据。jQuery.jqPlot是这样一款强大的JavaScript库,专为创建高质量的图表而...

    jquery.jqplot.1.0.4r1121.zip

    安装和使用jqPlot非常简单,只需在HTML文件中引入相关依赖,然后编写几行JavaScript代码,就可以快速创建出高质量的图表。 总的来说,jQuery.jqPlot是一个功能强大且易于使用的图表插件,它以jQuery为基础,提供...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery.jqplot.0.9.7r629.zip

    在实际应用中,我们通常会遵循以下步骤来使用jQuery.jqPlot: 1. **引入库文件**:在HTML文档中添加jqPlot的JS和CSS引用,确保它们在页面加载时可用。 ```html <link rel="stylesheet" type="text/css" href="...

    jquery.jqplot图表源码

    3. **示例文件**:示例文件通常包含HTML和JavaScript代码,展示了如何在实际项目中使用jqPlot,是学习使用jqPlot的好材料。 4. **文档**:如果压缩包中包含文档,将帮助开发者了解jqPlot的API、配置选项和最佳实践...

    jQuery插件:jqplot图表绘制插件详解

    使用jqPlot时,首先需要在HTML文件中引入jQuery库和jqPlot的JavaScript文件,通常还有其所需的CSS文件。jqPlot的`dist`目录通常包含这些资源文件。例如: ```html <script src="path/to/jquery.js"> ...

    jquery.jqplot.0.9.7r635(图表)

    这份文档详细介绍了如何安装、配置以及使用jqPlot创建图表,帮助开发者快速上手。 总的来说,jQuery.jqPlot 0.7r635是一款强大的图表插件,无论你是新手还是经验丰富的开发者,都能从中找到合适的工具来呈现你的...

    jquery.jqplot.0.9.7r597.zip

    使用jqPlot的步骤大致如下: 1. 引入jQuery库:jqPlot依赖jQuery,所以首先要确保页面已经加载了jQuery。 2. 引入jqPlot核心文件:包括jqplot.core.js,jqplot.vmlRenderer.js等,它们提供了图表绘制的核心功能和...

    jQuery插件 Jqplot图表实例

    ### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表...

    HTML5基于jqplot插件实现的曲线柱形统计图表源码

    在本项目中,jQuery用于初始化jqPlot插件,设置图表的参数,以及处理用户与图表的交互事件。 `jqplot.css`可能是包含jqPlot插件样式规则的文件,用于调整图表的外观和布局,确保其与网页设计风格协调一致。 `m_...

    Jqplot-Jquery数据图插件

    **Jqplot - jQuery数据图插件** Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、...在“jquery.jqplot.1.0.0b2_r1012”这个版本中,包含了完整的源码和示例,是学习和使用Jqplot的好起点。

Global site tag (gtag.js) - Google Analytics