Jquery 如何根据jqplot折线图中的图例绘制多个y轴
我想根据图例绘制多个y轴。实际上,我的要求是,我想显示货币方面的折线图,以便显示多个y轴。例如,我制作了美元和印度卢比折线图,以便显示两个y轴,一个表示美元,另一个表示印度卢比 我写了下面的代码,但它只显示一个y轴,而不是两个,所以请帮助我Jquery 如何根据jqplot折线图中的图例绘制多个y轴,jquery,jqplot,Jquery,Jqplot,我想根据图例绘制多个y轴。实际上,我的要求是,我想显示货币方面的折线图,以便显示多个y轴。例如,我制作了美元和印度卢比折线图,以便显示两个y轴,一个表示美元,另一个表示印度卢比 我写了下面的代码,但它只显示一个y轴,而不是两个,所以请帮助我 var inr = {"2013-04-01":73681,"2013-05-01":90882,"2013-06-01":2042039,"2013-07-01":457605,"2013-08-01":543738,"2013-09-01":774479
var inr = {"2013-04-01":73681,"2013-05-01":90882,"2013-06-01":2042039,"2013-07-01":457605,"2013-08-01":543738,"2013-09-01":774479,"2013-10-01":247861,"2013-11-01":858875,"2013-12-01":219342,"2014-01-01":129519,"2014-02-01":789934,"2014-03-01":0};
var usd = {"2013-04-05":392,"2013-05-05":19671,"2013-06-05":23952,"2013-07-05":11660,"2013-08-05":30234,"2013-09-05":1020,"2013-10-05":5995,"2013-11-05":15088,"2013-12-05":23432,"2014-01-05":1522,"2014-02-05":743,"2014-03-05":0};
var render=function(){
$.each(inr, function(key,value){
data[0].push([key,value]);
});
$.each(usd, function(key,value){
data[1].push([key,value]);
});
return data;
}
var plot1b = $.jqplot('chart1b', [], {
dataRenderer:render,
title:{
text: 'Purchase Order Report',
color: '#ccc'
},
legend:{show:true, renderer:$.jqplot.EnhancedLegendRenderer},
series:[{breakOnNull: true}],
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
}
},
series:[{label:'<div style="padding:6px;">INR</div>'},{label:'<div style="padding:6px;">USD</div>'}],
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
axes: {
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
autoscale:true,
min: 0,
numberTicks: "7",
label: 'currency'
},
y2axis: {
autoscale:true,
min: 1000,
numberTicks: "7",
label: 'currency1'
},
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: "%b",
angle: 0,
textColor: '#dddddd'
},
min:start_date,
max: end_date,
tickInterval: "1 month",
label: 'Month'
}
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
location: 's',
placement:'outside',
marginTop : '10px',
rendererOptions:{
numberRows: 1
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
}
});
});
var inr={“2013-04-01”:73681,“2013-05-01”:90882,“2013-06-01”:2042039,“2013-07-01”:457605,“2013-08-01”:543738,“2013-09-01”:774479,“2013-10-01”:247861,“2013-11-01”:858875,“2013-12-01”:219342,“2014-01-01”:129519,“2014-02-01”:789934,“2014-03-01”:0};
var usd={“2013-04-05”:392,“2013-05-05”:19671,“2013-06-05”:23952,“2013-07-05”:11660,“2013-08-05”:30234,“2013-09-05”:1020,“2013-10-05”:5995,“2013-11-05”:15088,“2013-12-05”:23432,“2014-01-05”:1522,“2014-02-05”:743,“2014-03-05”:0};
var render=function(){
$。每个(印度卢比,功能(键,值){
数据[0]。推送([key,value]);
});
美元/个(美元、功能(键、值){
数据[1]。推送([key,value]);
});
返回数据;
}
变量plot1b=$.jqplot('chart1b',[]{
数据渲染器:渲染,
标题:{
文本:“采购订单报告”,
颜色:“#ccc”
},
图例:{show:true,渲染器:$.jqplot.EnhancedLegendRenderer},
系列:[{breaknnull:true}],
系列默认值:{
渲染器选项:{
平滑:是的,
动画:{
秀:真的
}
}
},
系列:[{标签:'INR'},{标签:'USD'}],
axesDefaults:{
labelRenderer:$.jqplot.CanvasAxisLabelRenderer,
},
轴线:{
亚克斯:{
渲染器:$.jqplot.LogAxisRenderer,
自动缩放:对,
分:0,,
编号:“7”,
标签:“货币”
},
Y轴:{
自动缩放:对,
最小:1000,
编号:“7”,
标签:“currency1”
},
xaxis:{
渲染器:$.jqplot.DateAxisRenderer,
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
选择:{
格式化字符串:“%b”,
角度:0,
textColor:“#dddddd”
},
min:开始日期,
马克斯:结束日期,
间隔时间:“1个月”,
标签:“月”
}
},
图例:{
渲染器:$.jqplot.EnhancedLegendRenderer,
秀:没错,
位置:“s”,
位置:'外部',
marginTop:'10px',
渲染器选项:{
编号:1
}
},
荧光灯:{
秀:没错,
SizedJust:7.5
}
});
});
用下面的代码替换您的系列
选项,它将适合您
series : [
{
yaxis : 'yaxis',
label : '<div style="padding:6px;">INR</div>'
},
{
yaxis : 'y2axis',
label : '<div style="padding:6px;">USD</div>'
}
],
系列:[
{
雅克斯:“雅克斯”,
标签:“印度卢比”
},
{
yaxis:‘y2axis’,
标签:“美元”
}
],
这告诉系列
使用哪个yaxis
。我希望这有帮助