图形化工具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
}
}
}
);
效果图: