Question

我正在尝试使用JQPlot创建一个具有法线轴和基于对数的轴的多轴图表。该图表应使用四个系列的数据。无论我尝试什么，我似乎无法创造它。对齐轴，让对数刻度从零开始，具有如下的对数刻度：1-10-100-1000-10000，它们似乎都无法实现。有人可以帮我弄这个吗？感谢。

<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>

Answer 1

尽可能接近：

enter image description here

似乎LogAxisRenderer似乎不想尊重min选项以强制它从0开始（尽管从查看它看起来支持它的代码）。

小提琴here。

具有正常和对数刻度的多轴图表

1 个答案: