3

jqplot を使用している間、2 つのシリーズで棒グラフを作成する必要があり、それぞれが 3 つの異なる値 (カテゴリ) で構成されています。問題は、最初の値が約 50000 で、他の 2 つの値が約 (-3) - (3) であることです。したがって、1 つのチャートに描画している間は、2 つのバーしか表示されません。y 軸に LogRenderer を使おうと思っていたのですが、どうもうまくいきません。最良のオプションは、各 tickgroup(category) に異なる y 軸を設定することですが、検索した後、これを行う方法が見つかりませんでした。(重要なのは、シリーズが 2 つだけである必要があることです。これは日付の比較であるため、シリーズの内容を変更することはできません)

これを達成する方法を知っている人はいますか？または、すべてのデータを 1 つのグラフに表示する他の方法はありますか (主に棒グラフを使用)。

JS は私の作業例をいじります: http://jsfiddle.net/F5N4r/

ヘッダー:

<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.logAxisRenderer.min.js"></script>
<div id="plot"></div>​

コード：

var s1 = [50000, 0.11, 2.3];
var s2 = [55000, -0.20, 1.4];

var ticks = ['category 1', 'category 2', 'category 3'];

var plot1 = $.jqplot('plot', [s1, s2], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            fillToZero: true
        }
    },
    series: [
        {
        label: 'January 2012'},
    {
        label: 'February 2012'}
    ],
    legend: {
        show: true,
        placement: "outside",
        location: "s",
        renderer: $.jqplot.EnhancedLegendRenderer,
        rendererOptions: {
            numberRows: 1
        },
        marginTop: "34px"
    },
    axes: {

        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },


        yaxis: {
            //renderer: $.jqplot.LogAxisRenderer,
            pad: 1.05,
            tickOptions: {
                formatString: '%d'
            }
        }
    }
});​

結果: http://www.roslaw.pl/pics/2012-11-29_18-56-55_835341x930andWndpnd.png

ありがとう

4

1 に答える 1

0

私はこれで自分で遊んでいますが、これで誰かの時間を節約できることを願っています。

関数に渡されるシリーズごとに個別のシリーズを定義する必要があります (この場合は s1 と s2)。それらを定義する順序は、それらが渡される順序に対応します。

series: [
    {
        label: 'January 2012',
    }, 
    {
        yaxis:'y2axis',
        label: 'February 2012'
    }
],

...

axes: {
    xaxis: {
        },
        yaxis: {
            label: "y axis 1"
        },
        y2axis: {
            label: 'y axis 2',
        }
}
于 2014-07-01T16:08:23.020 に答える