欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-02 11:47:00
...

 

国内网站有 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]]);
});

 js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
            
    
    博客分类: Html&CSSPHP+MySQLJavaScript/Jquery htmljsjquery统计

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
            }
        }
    });
});

 js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
            
    
    博客分类: Html&CSSPHP+MySQLJavaScript/Jquery htmljsjquery统计

 

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

  • js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
            
    
    博客分类: Html&CSSPHP+MySQLJavaScript/Jquery htmljsjquery统计
  • 大小: 18.7 KB
  • js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
            
    
    博客分类: Html&CSSPHP+MySQLJavaScript/Jquery htmljsjquery统计
  • 大小: 7.8 KB