浅尝JQchart！

最新推荐文章于 2017-08-08 22:06:42 发布

liuxuejin

最新推荐文章于 2017-08-08 22:06:42 发布

阅读量4.4k

点赞数

文章标签： jquery 报表 function 照片 ie web

本文链接：https://blog.csdn.net/liuxuejin/article/details/6587645

版权

今天一个统计模块要做一个报表，我考虑了决定用JQchart来做。js绘图。因为页面不只需要来展示一下，所以fusionChart这种重量级的报表不用了。废话少说先来照片：

这就是JQchart显示出来的，非常漂亮。jqchart是一个jquery的插件。其实非常的简单。下面贴代码：

<!--[if IE]>
<script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script>
<![endif]-->
<script type="text/javascript" src="./lib/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="./jquery.jqchart.js" charset="utf-8"></script>
<script type="text/javascript" src="./lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./jquery.gradient-forjqchart.js"></script>

</head><body>

<style>

body { 
 margin: 20px; 
 font-family: "Myriad Web","Trebuchet MS","Tahoma","Helvetica","Arial","sans-serif"; 
}

#myBgBox{
 background-color:#3f464c;
 padding:30px;
 padding-top:5px;
 text-align:center;
 color:white;
}
#myBgBox h5{
 margin :15px;
 font-size : 18px;
}
.jQchart{
 font-size : 12px;
}
.jQchart-bg{
 margin-left  : auto ;
 margin-right : auto ;
}
.jQchart-labelData{
 font-size : 9px;
}
.jQchart-title{
 font-size : 12px;
}

</style>
<script type="text/javascript">

var data = [
   [200,555,200,300,700,600,789,666,887,336,666,776,123,333,567]

  ];
  
</script>

<div id="myBgBox">
 <h5>jQchart + use:gradient</h5>
 <canvas id="canvasMyID1" width="500" height="220"></canvas>
</div>

<script type="text/javascript">

var chartSetting1={
  config:{
    title    : '<b>type : "line"</b>,setting.config.colorSet : $.jQchart.colorSets.omitted',
    labelX : ["11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"],
    type     : 'line',
    bgGradient : {
      direction : '',
      from  : '',
      to    : ''
    },
    colorSet : $.jQchart.colorSets.omitted
  },
  data : data
};

jQuery(function($){
 $('#canvasMyID1').jQchart(chartSetting1);
})

</script>

本博客是用来记录开发中的一些小技巧的，一般都是比价容易懂的东西。细节就不多说了

liuxuejin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
浅尝JQchart！

今天一个统计模块要做一个报表，我考虑了决定用JQchart来做。js绘图。因为页面不只需要来展示一下，所以fusionChart这种重量级的报表不用了。废话少说先来照片：这就是JQchart显示出来的，非常漂亮。jqchart是一个jquery的插件。其实非
复制链接

扫一扫