`

js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等

阅读更多

 

国内网站有 http://www.ichartjs.com/

国外网站有 http://www.jqplot.com/index.php

 

1.简单示例1 线条图

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

 

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

 http://dl.iteye.com/upload/attachment/0069/9140/397fa4be-63b1-3135-bd47-40dd9c8971d2.png

2.简单示例2 柱状图

$(document).ready(function(){
    // For horizontal bar charts, x an y values must will be "flipped"
    // from their vertical bar counterpart.
    var plot2 = $.jqplot('chart2', [
        [[2,1], [4,2], [6,3], [3,4]],
        [[5,1], [1,2], [3,3], [4,4]],
        [[4,1], [7,2], [1,3], [2,4]]], {
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            // Show point labels to the right ('e'ast) of each bar.
            // edgeTolerance of -15 allows labels flow outside the grid
            // up to 15 pixels.  If they flow out more than that, they
            // will be hidden.
            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
            // Rotate the bar shadow as if bar is lit from top right.
            shadowAngle: 135,
            // Here's where we tell the chart it is oriented horizontally.
            rendererOptions: {
                barDirection: 'horizontal'
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});

 http://dl.iteye.com/upload/attachment/0069/9146/107f9e2e-944f-37bc-9ee3-7124e221a16d.png

 

更多内容 请参考我的个人博客 http://ismartstudio.com/

  • 大小: 18.7 KB
  • 大小: 7.8 KB
10
0
分享到:
评论
2 楼 guangqiang 2012-10-16  
wocary 写道
这个很方便啊

嗯是啊,用起来就是替换一下代码  相当地省劲...
1 楼 wocary 2012-10-16  
这个很方便啊

相关推荐

    js jquery实现柱状图,饼状图,折线图,平面图,立体三维图

    在JavaScript和jQuery的世界里,创建各种图表是一种常见的需求,用于数据可视化和信息的直观呈现。在给定的标题和描述中,我们主要涉及到四种图表类型:柱状图、饼状图、折线图以及立体三维图。这些图表的实现通常...

    jquery各种统计图

    3. **jQuery线条图/折线图**:线条图常用于表示随时间变化的趋势或比较不同数据系列。在jQuery中,利用Highcharts的线条图功能,可以创建动态、交互式的线条图,调整颜色、点样式,甚至添加滑动窗口来查看特定时间段...

    jQuery图表制作插件(含实例),饼状图,柱状图,曲线图等

    jQuery图表制作插件是Web开发中的一个重要工具,它允许开发者轻松地在网页上创建各种类型的可视化图表,如饼状图、柱状图和曲线图等。这些图表在数据分析、信息展示以及用户交互等方面发挥着至关重要的作用。在本篇...

    jQuery.Highcharts.js绘制柱状图饼状图曲线图

    总的来说,jQuery.Highcharts.js为开发人员提供了一种高效且灵活的方式来在网页上展示复杂的数据,无论是单独使用还是结合柱状图、饼状图和曲线图的组合,都能帮助用户更好地理解和解释数据。通过熟练掌握Highcharts...

    jquery曲线图,饼状图插件

    在实际项目中,选择合适的jQuery曲线图和饼状图插件,需要考虑性能、易用性、社区支持等因素。例如,`Chart.js`、`Highcharts`、`Google Charts`、`ECharts`和`Flot`都是受欢迎的图表库,它们都有丰富的API和示例...

    ASP统计图,折线图、饼图、拄状图等...

    在ASP中,我们可以利用各种技术来实现数据的可视化,如折线图、饼图、柱状图等统计图表,这些图表对于数据分析和展示至关重要。 统计图是数据可视化的关键工具,它能够帮助我们直观地理解复杂的数据信息。以下将...

    jQuery插件 Jqplot图表实例

    Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表样式和行为。在本篇文章中,我们将详细介绍如何使用 Jqplot ...

    jqplot1.0.4

    在版本1.0.4中,它延续了其一贯的优秀特性,使得创建饼状图、柱状图、线状图等各类图表变得轻松易行。本文将深入探讨jqPlot 1.0.4的核心特点,以及如何利用它来构建直观、动态的数据展示。 一、jqPlot简介 jqPlot ...

    jqPlot jquery的页面图表绘制工具

    jqPlot的核心是jqplot.js文件,但为了支持不同类型的图表,如饼状图、柱状图等,还需要额外引入相应的渲染器文件,比如pieRenderer.js用于饼状图。 使用jqPlot进行图表绘制通常分为以下几个步骤: 1. **引入...

    Highcharts图表使用说明

    Highcharts 支持多种图表类型,包括但不限于线图、折线图、面积图、面积折线图、柱状图、条形图、饼图、散点图等。这些图表类型可以灵活组合在一个图表中,以满足不同场景的需求。 ##### 2.6 简单的配置语法 ...

    Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种丰富的数据可视化效果,广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中,你可以选择不同的图表...

    html5-svg-circle-chart

    "html5-svg-circle-chart"项目就是利用这些技术实现的一种创新的图表展示方式,它将传统的饼状图和柱状图升级为更吸引眼球的空心圆环动画效果。下面将详细介绍这个项目涉及的关键知识点。 1. HTML5:HTML5是HTML的...

    Jquery图形报表插件 jqplot简介及参数详解

    JQuery图形报表插件jqPlot是一款强大的JavaScript库,专门用于创建各种类型的图表,如线图、柱状图、饼图等。它提供了丰富的定制选项,使得开发者能够根据需求设计出美观且功能丰富的图表。以下是对jqPlot的一些主要...

    Highcharts培训.pdf

    6. **丰富的图表类型**:支持直线图、曲线图、区域图、区域曲线图、柱状图、饼状图、散点图等多种图表类型。 7. **易于使用**:无需具备高级编程技巧,只需简单配置选项即可生成所需图表。 8. **时间轴精度**:...

    基于svg的手绘风格图表插件

    chart.xkcd不仅提供了基本的图表类型,如折线图、饼状图、柱状图和散点图,而且可以通过npm(Node Package Manager)进行安装,方便前端开发者快速集成到项目中。 **使用chart.xkcd的步骤**: 1. **安装**:在你的...

    jqPlot 基于jquery的画图插件

    虽然 jqPlot 在很多方面表现出色,但也存在一些缺点,如柱状图无法直接显示具体数据值,饼状图无法显示具体百分比。这可能需要开发者通过额外的手段来实现这些功能,或者寻找其他更适合的图表库进行补充。 配置 ...

Global site tag (gtag.js) - Google Analytics