图形化工具jqplot使用梳理1--多数据及差集的重绘

jqPlot是一款生成简易前端图形的纯js的jquery插件，能生成折线图、饼状图、柱状图及复合图形。依赖于jquery-version.js库文件。
应用
引用相应的文件
<link href="${ctx}/resources/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
<!--相关脚本-->
<script type="text/javascript" src="${ctx}/resources/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctx}/resources/jqplot/jquery.jqplot.min.js"></script>
<script src="${ctx}/resources/jqplot/excanvas.min.js"></script>
<!--针对x轴，设置不同的渲染机制及 高亮插件的使用 -->
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.highlighter.min.js"></script> 

创建相应的接受容器
必须指定容器的宽高，及id标示属性
<div id="chart" style="height: 400px; width: 980px;"></div>

装载数据，展示报表
加载数据，通过上面的id属性展示在特定的容器内
//数据集
var plot1 = $.jqplot('chart', [line1,line2,line3], {   
      title:'${title}',//标题
      seriesColors: ["#ffcccc","#ff0000","#00ff00"],//数据集上的节点的对应颜色
      axesDefaults: {//默认的渲染风格
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          tickOptions: {
              angle: 70,  //倾斜角度
              fontSize: '10pt'//字体大小
          }
      },
      axes:{   
          xaxis:{   
              label: '日期',
              //renderer: $.jqplot.CategoryAxisRenderer,
              renderer: $.jqplot.DateAxisRenderer, //x轴绘制方式 LinearAxisRenderer
              tickOptions:{   
                  formatString:'%Y-%m-%d'   --x轴展示的格式化
              },
              //tickInterval:8,//界面坐标线的间隔，针对于日期渲染方式
              labelOptions: {
                  fontSize: '12pt'
              }
          },
          yaxis:{   
              tickOptions:{   
                    formatString:'%.2f',   
                    angle:0    
              },   
              labelOptions:{                    
                  fontSize: '12pt'               
              },    
              label:'价格', 
              min:${minvalueY}  // set the min value for the y axis 
          }   
      },
      highlighter:{//高亮插件
          show: true,  //鼠标选中是否高亮
          sizeAdjust: 7.5,  //当鼠标移动到数据点上时，数据点扩大的增量增量
          tooltipAxes: 'xy', //提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。值分别为 x, y or xy.  
          //showMarker:true,   
          //yvalues: 4,   
          formatString:'<table class="jqplot-highlighter"><tr><td>日期:</td><td>%s</td></tr><tr><td>价格:</td><td>%.2f</td></tr></table>'
          //showTooltip: true, //是否显示提示信息栏
          //tooltipLocation: 'nw', //提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw.
          //fadeTooltip: true, //设置提示信息栏出现和消失的方式(是否淡入淡出)
          //tooltipFadeSpeed: "slow",//设置提示信息栏淡入淡出的速度：slow, def, fast, 或者是一个毫秒数的值.
          //tooltipOffset: 2, //提示信息栏据被高亮显示的数据点的偏移位置，以像素计。
          //tooltipAxes: 'xy', //提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。值分别为 x, y or xy.
          //tooltipSeparator: ', ', //提示信息栏不同值之间的间隔符号
          //useAxesFormatters: false, //提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
          //tooltipFormatString: '<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f---%s'   
      } , 
      series:[    
            {
                lineWidth: 2, //指定折线的宽度
                markerOptions: { size: 5} //为了业务逻辑需要，设置小，会被后面重绘覆盖掉
            },    
            {   
              showLine:false,   //只显示节点元素，不显示线
              markerOptions: { size: 10}   
            }
            ,    
            {   
              showLine:false,    
              markerOptions: { size: 10}   
            }   
       ]   
    });   

数据组织形式，为了和jqplot的数据格式保持一致，使用了org.codehaus.jackson.map.ObjectMapper类
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
ObjectMapper mapper = new ObjectMapper();
mapper.setDateFormat(sdf);

List<Object[]> totalRevenue = new ArrayList<Object[]>();//所有值  数据对象是对应的x与y的数值
String  line1 = mapper.writeValueAsString(totalRevenue);//相应的字符串

效果为了在折线上显示两种不同的数据，且用一个x坐标轴，使用了全部展示，并用在后面进行重绘（不显示线条且节点扩大覆盖）的思路。

效果如下：