图形化工具jqplot使用梳理4-多折线及多坐标轴处理

 多折线图及多坐标轴实例应用
 var plot1 = $.jqplot('chart', [line2,line1], { //集合的数量   
      title:'${title}',
      series:[    
            {//和集合的数据保存一致，否则会默认初始化
                lineWidth: .5, //指定折线的宽度
                markerOptions: { size: 8},
                label: '收益组合'
            },
            {
                lineWidth: 1, //指定折线的宽度
                markerOptions: { size: 2},
                label: '净值组合',
                yaxis:'y2axis'
            }
      ],
      legend: {
            show: true,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）
            location: 'nw'
            /*
            ,     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
            xoffset: 12,        // 分类名称框距图表区域上边框的距离（单位px）
            yoffset: 12,        // 分类名称框距图表区域左边框的距离(单位px)
            background:'#00ccff' ,       //分类名称框距图表区域背景色
            textColor:'#ff0000'          //分类名称框距图表区域内字体颜色..其他关于样式设计参考官方文档
            */
         },
      seriesColors: ["#cbccb2","#ff0000"],//和集合的数据保存对应
      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'   
              },
              //tickInterval: ''+86400000,   //1 day的毫秒数 
              labelOptions: {
                  fontSize: '12pt'
              }
          },
          y2axis:{ //坐标轴y2
              tickOptions:{   
                    formatString:'%.2f',   
                    angle:0    
              },   
              labelOptions:{                    
                  fontFamily:'Helvetica',                    
                  fontSize: '14pt'               
              },    
              label:' 总  值(亿)'  ---竖排的时候，要对齐配置
              //min:${minvalueY}  // set the min value for the y axis 
          },
          yaxis:{ //坐标轴y
              tickOptions:{   
                    formatString:'%.2f',   
                    angle:0    
              },   
              labelOptions:{                    
                  fontFamily:'Helvetica',                    
                  fontSize: '14pt'               
              },    
              label:' 得  失(%)'  ---竖排的时候，要对齐配置 注意和英文字符的区分
              //min:${minvalueY}  // set the min value for the y axis 
          }   
      }
      }
      );

效果图：