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

JavaScript开发中如何使用jQuery jqPlot插件绘制柱状图

程序员文章站 2023-01-22 07:56:43
  在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqplo...

  在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqplot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户。

  插件官方地址:https://www.jqplot.com/

  具体实现如下:

  引用js文件:

 

代码如下:


 <link href="~/scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
 <link href="~/scripts/asset/jqplot/syntaxhighlighter/styles/shcoredefault.min.css" rel="stylesheet" />
 <link href="~/scripts/asset/jqplot/syntaxhighlighter/styles/shthemejqplot.min.css" rel="stylesheet" />
 <script src="~/scripts/asset/jquery-1.10.2.min.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/syntaxhighlighter/scripts/shcore.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/syntaxhighlighter/scripts/shbrushjscript.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/syntaxhighlighter/scripts/shbrushxml.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/excanvas.min.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/plugins/jqplot.barrenderer.min.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/plugins/jqplot.categoryaxisrenderer.min.js"></script>
 <script type="text/javascript" src="~/scripts/asset/jqplot/plugins/jqplot.pointlabels.min.js"></script>


  html代码

 

 

代码如下:


<p id="chart1" class="box"></p>

 

  javascript脚本:

 

代码如下:


 var chartbar = function () {
         var data={param1:param1,param2:param2};//传递参数
         $("#chart1").html("");//绘图div
         var s1;
         $.ajax({
             type: "post",
             url: '../home/accountsum',
             data: data,
             datatype: "json",
             async: false,
             success: function (d) {
                 if (d.flag) {
                     s1 = [parsefloat(d.data.total1), parsefloat(d.data.total2), parsefloat(d.data.total3), parsefloat(d.data.total4), parsefloat(d.data.total5), parsefloat(d.data.total6)];
                 } else {
                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
                 }
                 $.jqplot.config.enableplugins = true;
                 var ticks = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 var plot1 = $.jqplot('chart1', [s1], {
                     // only animate if we're not using excanvas (not in ie 7 or ie 8)..
                     //animate: !$.jqplot.use_excanvas,
                     seriesdefaults: {
                         pointlabels: { show: true },
                         shadow: false,
                         showmarker: true, // 是否强调显示图中的数据节点
                         renderer: $.jqplot.barrenderer,
               nbsp;          rendereroptions: {
                             barwidth: 50,
                             barmargin: 50
                         }
                     },
                     axes: {
                         xaxis: {
                             show: true,    //是否自动显示坐标轴
                             renderer: $.jqplot.categoryaxisrenderer,
                             ticks: ticks,
                             showticks: true,        // 是否显示刻度线以及坐标轴上的刻度值 
                             showtickmarks: true,    //设置是否显示刻度
                             tickoptions: {
                                 show: true,
                                 fontsize: '14px',
                                 fontfamily: 'tahoma,arial,"hiragino sans gb",宋体b8b体,sans-serif',
                                 showlabel: true, //是否显示刻度线以及坐标轴上的刻度值
                                 showmark: false,//设置是否显示刻度
                                 showgridline: false // 是否在图表区域显示刻度值方向的网格
                             }
                         },
                         yaxis: {
                             show: true,
                             showticks: false,        // 是否显示刻度线以及坐标轴上的刻度值 
                             showtickmarks: false,     //设置是否显示刻度
                             autoscale: true,
                             borderwidth: 1,
                             tickoptions: {
                                 show: true,
                                 showlabel: false,
                                 showmark: false,
                                 showgridline: true,
                                 formatstring: '¥%.2f'
                             }
                         },
                     },
                     grid: {
                         drawgridlines: true,
                         drawborder: false,
                         shadow: false,
                         bordercolor: '#000000',     // 设置图表的(最外侧)边框的颜色
                         borderwidth: 1           //设置图表的(最外侧)边框宽度 
                     },
                     highlighter: { show: false }
                 });
             },
             error: function () {
                 alert("获取图形统计数据失败!");
             }
         });
     };


  效果图:

 

JavaScript开发中如何使用jQuery jqPlot插件绘制柱状图

  今天就写到这里吧,初步看了一下官方上的事例,功能还是蛮强大的,使用也很方便、容易,根据本项目的需求,后续可能还会增加一些。不过在使用过程中也发现了一些问题,部分实现不一定可以满足。