Question

我想按照图例绘制多个y轴。实际上我的要求是我想显示货币明智的折线图，所以显示多个y轴。例如，我已经制作了USD和INR折线图，因此显示两个y轴一个用于USD，另一个用于INR。

我在下面写了代码，但它只显示了一个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,"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
      }

    });
});

Answer 1

将以下代码替换为您的series选项，这对您有用。

series : [
    {
        yaxis : 'yaxis',
        label : '<div style="padding:6px;">INR</div>'
    },
    {
        yaxis : 'y2axis',
        label : '<div style="padding:6px;">USD</div>'
    }
],

这告诉series使用哪个yaxis。我希望这有帮助

如何在jqplot的折线图中按照图例绘制多个y轴

1 个答案: