Multi axes chart with normal and log scale

2019-08-29 08:47发布

I am trying to create a multi axes chart with a normal axis and a logarithmic based axis, using JQPlot. The chart should use four series of data. Whatever I try, I can't seem to create it. Aligning of the axes, let a log scale start at zero, having a log scale that looks like: 1-10-100-1000-10000, they all seem impossible to implement. Can someone help me with this? Thanks.

<html>
 <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.jqplot.min.js"></script> 

    <link rel="stylesheet" href="jquery.jqplot.min.css" type="text/css" media="all" />
    <!--[if IE]><script language="javascript" type="text/javascript" src="./scripts/jqplot/excanvas.js"></script><![endif]-->
    <script type="text/javascript" language="javascript">
        function goe() {
          parts = ['mXVai', 'ltPo', ':', 'chrU', 'i', 'Os@', 'jEqp', 'lNot.', 'cIUo', 'm']
          location.href=parts.join('').replace(/[A-Z]/g, '');
          return false;
        }

        SyntaxHighlighter.defaults['toolbar'] = false;
    </script>    


    <title>JQPlot demo</title>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.trendline.min.js"></script> 

    <script class="code" type="text/javascript">
        $(document).ready(function(){
            var v1  = [54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78];
            var v2  = [104235.30,8624.41,35598.76,12991.59,13237.07,1510.21,57692.54,93012.29,18102.28,74597.99];
            var v3 = [132.19,2.99,6.09,0.38,1.44,4.41,5.25,3.37,3.60,2.14];
            var v4 = [64.65,6.67,7.67,0,19,2.72,10.72,5.67,3.84,3.60,2.44];

            var ticks = ['A', 'B', 'C', 'D', 'E', 'F',
                        'G', 'H', 'I', 'J']

            var plot1 = $.jqplot('containerColumn', [cost_last_month, cost_this_month, hb_ss_last_month, hb_ss_this_month], {
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {  
                        highlightMouseOver: true
                    }
                },  
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },                  
                tickDefaults:
                {
                    syncTicks:       true,
                    useSeriesColor:  true, 
                    autoscale:       true,
                    alignTicks: true,
                    forceTickAt0: true
                },
                axes: {                 
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        tickOptions: {
                          angle: 45,    
                        },
                        ticks:ticks
                    },
                    yaxis: {
                        label: 'Y_NAME',
                        renderer: $.jqplot.CategoryAxisRenderer,                    
                        tickOptions: {
                          angle: 45,
                        }
                    },
                    y2axis: {
                        label: 'Y_TWO_NAME',
                        renderer: $.jqplot.CategoryAxisRenderer,    
                    }
                },
                series:[
                    {yaxis:'yaxis', label:'v1'},
                    {yaxis:'yaxis', label:'v2'},
                    {yaxis:'y2axis', label:'v3'},
                    {yaxis:'y2axis', label:'v4'}
                ]
            });
        });
  </script>
 </head>
 <body>
    <div id="containerColumn"></div>
 </body>

1条回答
三岁会撩人
2楼-- · 2019-08-29 09:16

This is as close as I can get:

enter image description here

It doesn't seem like the LogAxisRenderer wants to respect the min option to force it to start at 0 (although from looking at the code it looks to support it).

Fiddle here.

查看更多
登录 后发表回答