【问题标题】:Multi axes chart with normal and log scale具有正常和对数刻度的多轴图表
【发布时间】:2012-10-11 11:24:40
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

  • 问题仍然存在,所以这个评论是为了让帖子回到问题的顶部

标签: charts jqplot logarithm axes


【解决方案1】:

这是我能得到的最接近的:

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

小提琴here.

【讨论】:

  • 感谢您的回答。这已经是很大的进步了。剩下两个问题:1.有没有办法让LogAxisRenderer尊重最小值?从 0 或 0.1 开始会比从 1000 开始更好。 2. 对数轴看起来有点奇怪,因为这些值的空白间距并不相同。例如,1000 和 5000 之间的间距比 5000 和 10000 之间的间距大很多。我希望有一个标准量的白色间距,或者省略 5000、50000 和 500000。
  • @Attiej:问题(1):这是他们似乎还没有解决的问题。问题(2):这就是对数轴的工作方式。拿起你的计算器,玩弄 y = 10^x,你会发现 x 的较低值之间的相等变化产生的 y 变化比 x 在较高值下的等效变化产生的变化要小。
猜你喜欢
  • 2019-06-21
  • 1970-01-01
  • 1970-01-01
  • 2020-06-20
  • 2019-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多