最简单的线图
第一步:引入必要的CSS、JS文件
- <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
- <!-- excanvas.js用于兼容IE浏览器 -->
- <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js">
- <!-- jQuery库,此处引用自百度api库 -->
- <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
- <!-- jqPlot自身支持文件,不带有min的为未压缩版 -->
- <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
第二步:在body中准备要绘制图表的节点
- <!-- 用于绘制图表,id在JS代码中会用到 -->
- <div id="chart1" style="width:300px;height:300px;"></div>
第三步:编写JS代码,绘制图表
- $(function(){
- /**
- * 第一个參数为body中div的id值
- * 第二个參数为要绘制的线形图中各拐点的取值
- * */
- var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);
- });
第四步:查看效果
第五步:常见问题
- Uncaught ReferenceError: jQuery is not defined【检查是否引入了jQuery库,或者jQuery库是否在其它JS文件之前被引入。】
- Uncaught TypeError: Cannot read property 'msie' of undefined【检查jQuery库版本号是否为2.X,尝试减少jQuery库版本号,但不能低于1.4版本号】
- Uncaught No Data 【检查JS代码,第二个參数是否为二维数组,假设不是,则报此异常】
至此,我们就完毕了最简陋的图表绘制。
后面我们能够做出更为复杂的图表,但都是基于以上步骤,除JS代码不同外,没有什么差别。
故,接下来的重点将放在JS代码上,其他步骤,不做赘述。
配置图表属性
jqPlot提供非常多的属性能够设置。通过不同的属性,图表能够展现出各式各样的外观。
和其他jQuery插件类似,jqPlot的配置也是採用js的对象作为參数传递。
因此。假设我们要给图表加入一些额外的属性,JS代码应该例如以下:
- var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], {
- // 配置属性代码
- });
全部的属性配置都将以键值对的形式出如今{}之间。
图表作为一种常见的数据表现形式,尤其是线形图表,它具有一定的属性对象。包含但不限于下面几种:
- 标题;
- 坐标轴,又分为X轴、Y轴;
- 数据序列;
- 图例;
- 背景;
- 光标。如鼠标经过数据拐点时,提示该点详细数值。
当中以上每一条都能够作为单独的对象。并衍生出很多其它的属性。以标题为例。标题能够包括文本、字体、颜色、对齐方式等属性。
这些对象和属性,都能够作为一个总的配置对象。传递给jqPlot,以便使jqPlot能够更加精准的绘制图表。
从最外层来看。第三个配置属性的參数应该是例如以下结构:
- {
- title:{ // 标题属性
- },
- axesDefaults:{ // 默认坐标轴属性
- },
- axes:{ // 详细坐标轴属性
- }
- legend:{ // 图例属性
- },
- grid:{ // 背景网格属性
- },
- seriesDefaults:{// 默认数据序列属性
- },
- series:{ // 详细数据序列属性
- },
- legend:{ // 图例属性
- },
- cursor:{ // 光标属性
- }
- }
进而深入到详细属性的配置,以标题为例。结构例如以下:
- title:{ // 标题属性
- text:'图表标题', // 标题文本
- show:true, // 是否阴影
- fontFamily:'微软雅黑', // 标题字体
- fontSize:14, // 标题字体大小
- textAlign:'center', // 标题对齐方式
- textColor:'red', // 标题颜色(也能够写作属性color)
- escapeHtml:false // 是否转义HTML字符,值为false时。能够在text属性中使用HTML代码
- }
其他如legend、grid、series等也是类似结构,详细能够配置属性列表,能够參考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。
带有其他设置的图表
有了之前对jqPlot图表的了解,我们就能够绘制出更为复杂些的图表。示比例如以下:
- $(function(){
- /**
- * 第一个參数为body中div的id值
- * 第二个參数为要绘制的线形图中各拐点的取值
- * */
- var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,
- 12, 6, 47, 15, 24, 39, 16, 48, 5, 6,
- 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],
- [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,
- 34, 17, 1, 45, 37, 47, 34, 30, 31, 10,
- 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],
- [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,
- 25, 5, 18, 34, 20, 3, 8, 16, 41, 19,
- 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]
- ];
- var plot = $.jqplot('chart1', data, {
- title:{ // 标题属性
- text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>', // 标题文本
- show:true, // 是否阴影
- fontFamily:'微软雅黑', // 标题字体
- fontSize:14, // 标题字体大小
- textAlign:'left', // 标题对齐方式
- textColor:'#515151', // 标题颜色(也能够写作属性color)
- escapeHtml:false // 是否转义HTML字符。值为false时,能够在text属性中使用HTML代码
- },
- axesDefaults:{ // 默认坐标轴属性
- min:0,
- tickOptions:{
- showMark:false
- }
- },
- axes:{ // 详细坐标轴属性
- xaxis:{
- label:'日期',
- ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]
- },
- yaxis: {
- label: '投放数量'
- }
- },
- legend:{ // 图例属性
- show:true
- },
- grid:{ // 背景网格属性
- borderWidth:1,
- shadow:false
- },
- seriesDefaults:{// 默认数据序列属性
- lineWidth:1,
- markerOptions:{
- show:true
- }
- },
- series:[ // 详细数据序列属性
- {
- color:'#FF6666',
- label:'CPC'
- },{
- color:'#0066CC',
- label:'CPT'
- },{
- color:'#99CC66',
- label:'CPM'
- }
- ],
- highlighter:{
- show:true,
- tooltipAxes:'y',
- useAxesFormatters:false,
- tooltipFormatString:'投放量:%d'
- }
- });
- });
由于在配置图表的标题(title)时,使用HTML标签,这个标签用了一个chart-title类的CSS。所以要增加例如以下CSS代码:
- .chart-title{
- background-color: #999999;
- margin-bottom: 10px;
- line-height: 30px;
- padding-left: 10px;
- background-color: #efefef;
- border-bottom:1px solid #dddddd;
- font-weight: bold;
- }
- #chart1{
- border: 1px solid #dddddd;
- }
其他部分代码没有修改,此时在页面中查看图表展示效果,例如以下:
完整代码
文件夹结构:
完整代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>jqPlot图表Demo</title>
- <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
- <style type="text/css">
- .chart-title{
- background-color: #999999;
- margin-bottom: 10px;
- line-height: 30px;
- padding-left: 10px;
- background-color: #efefef;
- border-bottom:1px solid #dddddd;
- font-weight: bold;
- }
- #chart1{
- border: 1px solid #dddddd;
- }
- </style>
- <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]-->
- <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
- <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- $(function(){
- /**
- * 第一个參数为body中div的id值
- * 第二个參数为要绘制的线形图中各拐点的取值
- * */
- var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,
- 12, 6, 47, 15, 24, 39, 16, 48, 5, 6,
- 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],
- [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,
- 34, 17, 1, 45, 37, 47, 34, 30, 31, 10,
- 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],
- [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,
- 25, 5, 18, 34, 20, 3, 8, 16, 41, 19,
- 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]
- ]
- var plot = $.jqplot('chart1', data, {
- title:{ // 标题属性
- text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>', // 标题文本
- show:true, // 是否阴影
- fontFamily:'微软雅黑', // 标题字体
- fontSize:14, // 标题字体大小
- textAlign:'left', // 标题对齐方式
- textColor:'#515151', // 标题颜色(也能够写作属性color)
- escapeHtml:false // 是否转义HTML字符。值为false时,能够在text属性中使用HTML代码
- },
- axesDefaults:{ // 默认坐标轴属性
- min:0,
- tickOptions:{
- showMark:false
- }
- },
- axes:{ // 详细坐标轴属性
- xaxis:{
- label:'日期',
- ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]
- },
- yaxis: {
- label: '投放数量'
- }
- },
- legend:{ // 图例属性
- show:true
- },
- grid:{ // 背景网格属性
- borderWidth:1,
- shadow:false
- },
- seriesDefaults:{// 默认数据序列属性
- lineWidth:1,
- markerOptions:{
- show:true
- }
- },
- series:[ // 详细数据序列属性
- {
- color:'#FF6666',
- label:'CPC'
- },{
- color:'#0066CC',
- label:'CPT'
- },{
- color:'#99CC66',
- label:'CPM'
- }
- ],
- highlighter:{
- show:true,
- tooltipAxes:'y',
- useAxesFormatters:false,
- tooltipFormatString:'投放量:%d'
- }
- });
- });
- </script>
- </head>
- <body>
- <!-- 用于绘制图表,id在JS代码中会用到 -->
- <div id="chart1" style="width:800px;height:400px;"></div>
- </body>
- </html>
版权声明:本文博客原创文章,博客,未经同意,不得转载。