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]]); });
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://ismartstudio.com/