jqplot:折线图的两个y轴(十进制和百分比)

时间:2014-02-20 19:55:01

标签: jqplot

jqplot是否有可能在折线图中为一个系列设置两个y轴:一个用于十进制值,另一个用于百分比?

这是我的代码。有两行,它们的值以百分比表示。我需要显示两个y轴。

var irr1 = [['2008-09-30', -100], ['2008-10-30', -99.81], ['2008-11-30', -95.73],
                    ['2008-12-30', -80.28], ['2009-01-30', -56.67], ['2009-02-28', -41.54],
                    ['2009-03-30', -30.33], ['2009-04-30', -23.31], ['2009-05-30', -19.93],
                    ['2009-06-30', -8.57], ['2009-07-30', 0.14], ['2009-08-30', 11.24], ['2009-09-30', 20.35]];
        var irr2 = [['2008-09-30', -100], ['2008-10-30', -99.10], ['2008-11-30', -86.44], ['2008-12-30', -60.00], ['2009-01-30', -34.43],
            ['2009-02-28', -20.80], ['2009-03-30', -12.54], ['2009-04-30', -7.88], ['2009-05-30', -5.52],
            ['2009-06-30', -0.96], ['2009-07-30', 2.09], ['2009-08-30', 5.47], ['2009-09-30', 7.92]];

        var data = [irr1, irr2];
        var plot1 = $.jqplot(elem.attr('id'), data, {
            animate: true,
            grid: {
                backgroundColor: "#FFFFFF",
                gridLineColor: '#000000',
                drawBorder: false,
                shadow: false,
                gridLineWidth: 0.5
            },
            //title: 'Default Date Axis',
            seriesDefaults: {
                rendererOptions: {
                    //////
                    // Turn on line smoothing.  By default, a constrained cubic spline
                    // interpolation algorithm is used which will not overshoot or
                    // undershoot any data points.
                    //////
                    smooth: true
                }
            },
            legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show: true,
                location: 'n',
                placement: 'outsideGrid',
                //shrinkGrid: true,
                rendererOptions: {
                    numberRows: 1
                }
            },
            //legend: {
            //    renderer: $.jqplot.EnhancedLegendRenderer,
            //    show: true,
            //    rendererOptions: {
            //        numberRows: 1
            //    }
            //},
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%Y-%m-%d' },
                    min: '2008-09-01',
                    tickInterval: '1 month'
                }
            },
            series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
            series: [
                        { label: 'IRR' },
                        { label: 'MIRR' }
                    ],
        });

0 个答案:

没有答案